DEV Community

Discussion on: A Modern CSS Reset

chriscoyier profile image
Chris Coyier

The mental leap for that is a tough one for me. Why isn't my position: sticky; working?! Oh, because some parent element has hidden X overflow? 🤯

Thread Thread
hankchizljaw profile image
Andy Bell Author

Yup. I completely forgot about that bugger. Definitely not helpful to be set as a global style in that context.

Thread Thread
igcorreia profile image
Ignácio Correia

Finally I figure it out too :)

Thread Thread
cullylarson profile image
Cully Larson

Apparently if you set the height of the element you're overflow hidden'ing on, sticky will work. So something like:

#container {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh; /* need to set this for child elements to be able to use display:sticky (c.f. https://github.com/w3c/csswg-drafts/issues/865) */
}
Enter fullscreen mode Exit fullscreen mode