HTML/CSSIntermediate#css#position

How does position: sticky work?

An element behaves as relative until its scroll position crosses a specified threshold (like top: 0), then it 'sticks' as fixed within the bounds of its containing block. It requires a defined top/bottom/left/right value and doesn't work if an ancestor has overflow: hidden.

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

Related Questions

1
HTML/CSSIntermediate#css#float

What is the CSS float property used for and what problems does it cause?

Open
2
HTML/CSSAdvanced#css#float

How do you clear floats without adding extra markup?

Open
3
HTML/CSSBeginner#css#flexbox

Explain Flexbox: main axis vs cross axis.

Open