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.

54 thoughts to “Help CSS position sticky doesn’t work [SOLVED]”

  1. Thanks for this —
    However, I had a table where “sticky” worked in Firefox but not in Chrome
    The problem was that the table was set to
    .style.display = ‘block’;
    To solve the problem I changed this to:
    .style.display = ‘table’;

  2. Also I found out today that if you put a element to make a line between you child elements in your sticky element it doesn’t work.

    1. In your CSS see if any parent has overflow:hidden. If so try to uncommet/delete it. If you know developer tools you can inspect the DOM there and try to uncheck the overflow style

      1. my div elements have set to max-property but not set to overflow any parents but then my sticky element is not working so now what should i do??????

  3. wow I just unchecked the overflow: hidden and everything was back to normal, but it’s a little sad that both can’t be used.

  4. Thank you! I almost gave up but found here the solution to my problem.

  5. What do you do if you need to have overflow:hidden? Ex. A really wide table with a horizontal scrollbar, that also needs position:sticky on the “th” elements to have a fixed header. Been trying to solve this for a week now

  6. 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.

  7. This is a great help – the post tag interface isn’t as nice. Thanks!

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

  9. Thank you so much, bro, you save my life haha 😀
    I found that my body class have an overflow hidden that bit me so hard for a long time!!!
    Thanks again!!

  10. 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.