CodePark/ questions / Display, positioning & stacking
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Display, positioning & stacking

A header has position: sticky; top: 0; but scrolls away with the page instead of sticking. What is the most likely cause?

An ancestor between the header and the page scroller has overflow: hidden

The overflow: hidden ancestor is right. A sticky element sticks relative to its nearest ancestor with a scrolling mechanism. overflow: hidden, auto or scroll all create one. If that ancestor is not the box that actually scrolls, the header never reaches its threshold. So it never sticks.

"Needs
z-index" is the tempting wrong answer. z-index only affects what paints on top once the header does stick. It doesn't make it stick. sticky also works on any element, not only children of body, and it doesn't need display: block.