I rather like
position: sticky;. It has practical use cases. I think of things like keeping a table of contents in a sidebar of a long article, but as a fairly simple implementation and without risk of overlapping things in awkward ways. But Elad Shechter is right here: it’s not used that much — at least partially — and probably because it’s a bit weird to understand.
I like how Elad explains it with a “Sticky Item” and a “Sticky Container.” The container needs to be large enough that scrolling is relevant and for the stickiness to do anything at all.
There are other gotchas, too. I feel like every time I try
position: sticky; in a real context, I have about a 30% chance of it working. There always seems to be some parent/child relationship thing that I can’t quite work out to prevent overlaps. Or, there is some parent element with
overflow: hidden;, which, for reasons unbeknownst to me, breaks this.
Safari has a bug (reported last year) where z-index isn’t respected and the following (non-sticky) div after a position:sticky div always goes underneath it – unless the screen is resized or refreshed or dev tools in launched – very frustrating. example
I copied your code into codepen and opened it on safari and it looking good to me
On the other hand, your url on safari is with the bug… strange
what is there on codepen that ignore this bug on safari?
That Codepen link wasn’t working so I did the same
So yes it works in Codepen – is Codepen using it’s own browser engine regardless of the browser it’s being viewed in?
If not then it must be because of the way it reloads / refreshes. The Safari bug is glitchy in that it fixes if you refresh or resize the window, or launch devtools.
I was having issues with static elements on my page being layered on top of my relative and absolutely positioned elements the other day. It was driving me crazy trying to figure out why until I removed “position: sticky” from my header. Everything went back to normal after that. That sort of unpredictable behavior has me reluctant to reach for it again in the future.