CSS Positioning: position: sticky

I spent an embarrassing amount of time debugging a sticky header that wouldn't stick. The fix was one line of CSS. The problem was an ancestor with overflow: hidden.

Here's what I learned about position: sticky and the gotchas that trip people up.

What It Does

position: sticky is a hybrid between relative and fixed. The element behaves normally in the document flow until you scroll past a threshold (like top: 0). Then it "sticks" to that position.

<div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="content">
    <!-- Content goes here -->
  </div>
</div>

.sticky-element {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Scroll down. The element stays at the top of the viewport. Scroll past its container, and it stops sticking — it stays within its parent's bounds.

Why It Breaks

Sticky positioning is one of those CSS features that works perfectly in a demo and breaks in real projects. Here are the common causes:

1. Ancestor with overflow: hidden or overflow: auto

This is the number one gotcha. If any ancestor element has overflow set to anything other than visible, sticky positioning breaks silently. The element just scrolls normally.

Fix: Remove the overflow property from the ancestor, or restructure your HTML so the sticky element isn't nested inside an overflow container.

2. No height on the parent

The sticky element sticks within its parent's boundaries. If the parent has no height (or its height equals the sticky element's height), there's nowhere to stick.

Fix: Make sure the parent is taller than the sticky element.

3. Missing threshold

position: sticky does nothing without a top, bottom, left, or right value. It needs to know where to stick.

Fix: Always specify at least one directional property. top: 0 is the most common.

The Trade-offs

Benefit: No JavaScript needed for sticky headers, sidebars, or table headers. The browser handles scroll performance natively.

Cost: The overflow gotcha is silent and frustrating. DevTools won't warn you. And sticky positioning doesn't work inside flex or grid containers in some edge cases without careful layout consideration.

When to Use It

Sticky headers, navigation bars, sidebar menus, table column headers — anything that should remain visible during scroll but still flow with the document. For more complex scroll-based positioning, you might need IntersectionObserver or a JavaScript solution.