position: sticky is a hybrid: an element behaves like relative (stays in normal flow) until it scrolls to a threshold you specify, then behaves like fixed (sticks in place) — but only while its containing block is still on screen.
{
: sticky;
: ;
}
The top (or bottom/left/right) value is required — it defines the threshold. Without it, sticky does nothing.
A sticky element is confined to its parent container. It sticks while scrolling through that parent, then scrolls away once the parent's bottom passes. This is what makes "sticky section headers" work — each header sticks only while its own section is in view.
1. An ancestor has overflow: hidden/auto/scroll. This is the #1 cause. Sticky positioning is broken by any scrollable ancestor, because the element sticks relative to that scroll container, not the page:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. The parent isn't tall enough. Sticky only has room to stick if the parent is taller than the sticky element — if the parent is the same height, there's nothing to scroll through, so it never appears to stick.
3. No threshold set. Forgetting top/bottom means no stick point.
4. Height constraints on the parent (e.g. a flex parent stretching items) can also remove the scroll room.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky powers sticky headers, table headers, sidebars, and "scrollspy" UIs with no JavaScript.
But its quirks — especially that an overflow on any ancestor silently breaks it — make it a frequent source of "why won't this stick?" debugging.
Knowing the containing-block scope and the overflow trap is what lets you use it reliably.