Why does `overflow:hidden` prevent `position:sticky` from working?

overflow: hidden is not preventing position: sticky from working. But if you set overflow to hidden on any ancestor of your sticky element, then this ancestor element will be the scrolling container for your sticky element. If you switch the overflow value on your ancestor from hidden to scroll and scroll this ancestor (not the window), then you can see that sticky is still working.

See also https://github.com/wilddeer/stickyfill#pro-tips:

Any non-default value (not visible) for overflow, overflow-x, or
overflow-y on any of the predecessor elements anchors the sticky to
the overflow context of that predecessor. Simply speaking, scrolling
the predecessor will cause the sticky to stick, scrolling the window
will not. This is expected with overflow: auto and overflow: scroll,
but often causes problems and confusion with overflow: hidden.

Or http://www.coreyford.name/files/position-sticky-presentation/:

The box’s position depends on its containing block (established as for
position:static) as well as its scrolling container, defined by the
nearest ancestor in the same document with a computed value for
‘overflow-x’ or ‘overflow-y’ other than ‘visible’, or the viewport if
no such ancestor exists.

Or the CSS Positioned Layout Module Level 3
W3C Working Draft
:

A stickily positioned box is positioned similarly to a relatively
positioned box, but the offset is computed with reference to the
nearest ancestor with a scrolling box, or the viewport if no ancestor
has a scrolling box.

Leave a Comment