Sticky Index Section

About this section

Sticky headers are four lines of CSS with one rule behind them that accounts for almost every report of “sticky doesn't work”: the element binds to the nearest ancestor with a scrolling overflow, so any ancestor carrying overflow hidden, auto or scroll silently becomes its scroll container. The header then either sticks to a box nobody can see or appears inert, and nothing anywhere reports an error. What makes it so persistent is that overflow hidden is hardly ever added deliberately — it arrives with a rounded-corner clip, an animation wrapper, a carousel, or a utility class three levels up added for something unrelated. A switch here adds exactly that, so the failure can be watched rather than taken on faith. Three further conditions fail just as quietly. A sticky element needs an inset, or there is no threshold to stick at. It travels only within its own containing block, which is why each year is made sticky inside its own group — that is what makes a new header push the previous one out instead of every header piling up at the top. And it does not automatically paint above later siblings, so it needs a stacking index and an opaque background or the rows scroll straight through it.