23. Absolute Positioning

Absolute positioning positions an element relative to its containing block.

• position: fixed
  • The containing block is defined as the viewport (screen). Thus, the element will not scroll with the document.
• position: absolute
  • The containing block is defined as the nearest enclosing block with position of relative, absolute, or fixed. If there is no such block, the containing block is a box anchored to the canvas but with the same size as the viewport.
• The top, bottom, left, and right properties take a length value specifying how far the given edge should be inside the corresponding edge of its containing block.
• The element is taken out of the normal flow, i.e. elements after it are positioned as if it did not exist.