Position

Static

The element goes with the normal document flow. z-index has no meaning here, and neither do top/left/bottom/right This is default

Relative

The element goes with the normal document flow, and then is offset relative to itself (using top/left/bottom/right) The element does not impact any other elements in the document The space given to the component in the page layout is the same as if position were static

Absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. Instead, the element is positioned relative to it's closest positioned ancestor (ie. an ancestor with a position value that is not static)

  • If there are no positioned ancestors, then the element is positioned relative to the initial containing block (ie. the parent of the <html> tag)

Creates a new stacking context as long as z-index is not set to auto

Fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to the initial containing block (ie. the parent of the <html> tag) If one of the element's ancestors has any of: transform, perspective, or filter, then that ancestor is used as the containing block. Creates a new stacking context

Sticky

The element goes with the normal document flow, and then is offset relative to 2 containing blocks: the nearest scrolling ancestor, and the nearest block-level ancestor.