CSS Positioning

  1. Box Model Review
  2. Containing blocks -- each HTML tag is contained in another, right back to the <html> tag itself. Examining the document tree can help view what the containing block is for a given element.
  3. Normal flow -- In this scheme, block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right. Vertical margins collapse if they intersect. Horizontal margins do NOT collapse.
  4. Static positioning -- the default value, where elements are located in normal flow.
  5. Absolute positioning -- positions elements from an absolute position of the nearest ancestral containing element with a position value other than static. Element is completely removed from the flow and its previous position is closed.
  6. Relative positioning -- positions elements from a position relative to their containing element. Element retains the shape it would have had if it were not positioned. The space the element normally occupies is preserved.

CSS Positioning Resources