Troubleshooting position: sticky: Quick Fixes and Solutions

If you are experiencing issues with the position: sticky feature in CSS, meaning it’s not working for you, the cause is usually one of the following.

1. The feature is not supported by your browser

Before proceeding, make sure position: sticky is supported by your browser. You can check support here.

The stickily positioned element is an element whose computed position value is sticky. It is treated as relatively positioned until its containing block crosses a specified threshold (such as top: 0), at which point it is treated as stuck (MDN).

2. No placement defined

For elements defined as sticky to work, they must have at least one of these placement properties: top, bottom, right, or left.

.sticky-element {
  position: sticky;
  top: 0;
}

3. One of the parent elements has the overflow property

If a parent of the sticky element has overflow: hidden, overflow: auto, or overflow: scroll, position: sticky will not behave as expected. That parent creates a new scrolling context, so the sticky element sticks within that container instead of the viewport.

Two other gotchas: the sticky element’s parent needs enough height for the page to scroll (otherwise there’s nothing to stick within), and a low or missing z-index can make the sticky element sit behind other content.
Here’s a JavaScript snippet that quickly detects whether any ancestor has a non-visible overflow (source).

let parent = document.querySelector('.sticky-element').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

FAQs

Common questions about position: sticky not working:

Summary

Most “sticky doesn’t work” cases come down to parent overflow, missing top/bottom/left/right, or browser support. Fix those first; the script above helps track down overflow. For more on layout and positioning, see the CSS beginners guide. For animating layout-related values, see the CSS @property guide.