Why does position: sticky doesn't work when parent is set to overflow: hidden?
It's the second time in one week where this happens to me and though I have figured out how to solve it ( spoiler alert, use overflow: clip instead of overflow: hidden ), I still would like to know why is it that overflow: hidden and position: sticky are not compatible.
6 Replies
it actually does work, but with overflow-hidden you are creating a new scrolling container. The sticky element isn't aware of the viewport anymore, now it's relative to that new scrolling container. But because the overflow is hidden and you scroll on the viewport, visualy nothing happens. if you set overflow: scroll (instead of hidden), you'll see it does stick to that element.
I think if you do not add top property for sticky header or bottom property for sticky footer, the stickiness won't work even if you add position: sticky. position: sticky and top: 0 go together
Now after adding top we are getting the stickiness of that header
FYI any parent element with
overflow set to auto, scroll, or hidden establishes a new scrolling context, as Mark pointed out. In this context, the sticky element’s behavior is restricted to the bounds of this parent element.
Source: https://www.w3.org/TR/css-overflow-3/#valdef-overflow-hidden
"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."Source: https://www.w3.org/TR/css-position-3/#sticky-pos when an element has
position: sticky:
- It sticks to the visible area of the webpage when its parent element scrolls off the viewport (overflow is actually visible, by default).
- It affects the layout of other elements on the page, taking up additional space like a regular block element.
In contrast, with position: fixed:
- The element remains fixed in its position relative to the viewport, even when scrolling.
- It doesn’t affect the flow of other elements.
saikat's example illustrates this behavior perfectly. Without top: 0, the header behaves like a relative positioned element, following the normal flow of the document.
https://css-tricks.com/video-screencasts/205-sticky-positioning-how-it-works-what-can-break-it-and-dumb-tricks