Skip to main content

Help CSS position sticky doesn’t work [SOLVED]

Position sticky isn’t a new thing, but the support is now so great that I started to use it, so what’s position sticky?

Sticky positioning is a hybrid of relative and fixed positioning.  The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
– Mozilla Foundation

Wauw, isn’t that awesome? No need for JavaScript anymore when you’re building your dynamic fixed headers. So how do I use it:

.sticky {
      position: sticky;

Remember that you need to specify a threshold either top, right, bottom or left. Otherwise, it will be indistinguishable from relative positioning.

But it doesn’t work

I had some issues getting it to work on an older site I did some updates on. After some “fun” investigation looking at the DOM I found out that a parent div was having overflow:hidden which means that the browser can’t calculate when the element has to be sticky.
Another gotcha but expected behavior is that once a parent with a sticky child goes out of view, the sticky element will also no longer stick.

26 thoughts on “Help CSS position sticky doesn’t work [SOLVED]

  1. Another thanks! Been struggling for days to make it work on Firefox (while it was working on Chrome) and thought it was a Firefox bug. But removing overflow:hidden solved it in a second across all browsers.

  2. just to let you know – if ever you have dropped out all your Overflows … there’s another issue with sticky and z-Indexes!

  3. Awesome! I couldn’t figure out why it wouldn’t work. Since it worked on another site, I figured it was some rule that was breaking it.

Leave a Reply

Your email address will not be published. Required fields are marked *