An ancestor between the header and the page scroller has
overflow: hiddenThe 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.
Read more
- position (MDN) (https://developer.mozilla.org/en-US/docs/Web/CSS/position)developer.mozilla.org