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? 🤯
Yup. I completely forgot about that bugger. Definitely not helpful to be set as a global style in that context.
Finally I figure it out too :)
Apparently if you set the height of the element you're overflow hidden'ing on, sticky will work. So something like:
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) */
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.