CSSEasy

How do the position values differ?

#css#position#layout

Answer

static: default; ignores top/left.
relative: offset from its normal spot but keeps its space; establishes a containing block for absolute children.
absolute: out of flow, anchored to the nearest ancestor whose position isn't static.
fixed: anchored to the viewport (unless an ancestor has transform/filter/will-change - then it anchors to that).
sticky: behaves as relative until it hits a threshold; needs a top/bottom value and a parent without overflow: hidden.

css

.header { position: sticky; top: 0; z-index: 10; }

CSSEasy

#css#position#layout

static: default; ignores top/left.
relative: offset from its normal spot but keeps its space; establishes a containing block for absolute children.
absolute: out of flow, anchored to the nearest ancestor whose position isn't static.
fixed: anchored to the viewport (unless an ancestor has transform/filter/will-change - then it anchors to that).
sticky: behaves as relative until it hits a threshold; needs a top/bottom value and a parent without overflow: hidden.

css

.header { position: sticky; top: 0; z-index: 10; }