CSS: Removing the space at the bottom of relatively positioned elements

The relatively positioned element like this adds a space at the bottom of the element:

#bottom {
  z-index: -1;
  position: relative;
  top: -100px;
}

The above CSS adds a 100px empty space below the #bottom element.
The easy way to get rid of that empty space is to replace top with margin-top, like this:

#bottom {
  z-index: -1;
  position: relative;
  margin-top: -100px; 
}