Relative Positioning

Relative Positioning

  • Moves element in relation to where it would have been in normal flow

  • Uses offset properties (top or bottom and left or right) to indicate how far to move the element from where it would have been in normal flow

  • Usually accompanied by box offsets: top, right, bottom, left.

  • It will not effect the other elements on the page, surrounding elements stay in the position in their normal flow positions

If you set position: relative; on an element but no offset attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be

Live Example

JS Bin on jsbin.com