22. Relative Positioning

Relative positioning can be used to move a box in the normal flow.

• position: relative
• The top, bottom, left, or right properties take a length value specifying how far the given edge should be moved.
• The layout of surrounding boxes are not affected; they are laid out as if the relatively positioned box has not moved.
• A javascript could use relative positioning to animate a box moving out of its normal position.
• Setting an element's position to relative without actually moving it is useful for other situations that will be explained later:
  • establishing a containing block for absolutely positioned descendants.
  • changing the element's stacking order