http://www.w3.org/TR/css3-positioning/#rel-pos
6.1. Relative positioning
A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it.
Basically a relatively positioned element still affects the surrounding elements. You're looking for position: absolute
, but heres a trick from the same document
...
A relatively positioned box establishes a new containing block for absolutely positioned descendants. (This is a common use of relatively positioned boxes.) The section on containing blocks explains when a relatively positioned box establishes a new containing block.
So by setting the parent to position: relative
you turn it into a containing block, which means that absolutely positioned elements contained within will be positioned relative to the edges of the parent rather than the root containing block (the window).
Hello World.
<span style="position: relative; background-color: red;">
This will be shown inline
<span style="position: absolute; top: 100%; left: 0px;">
This will be below
</span>
</span>