position: sticky not working

Sticky positioning has several gotchas.

Fix 1: Add a top value

/* ❌ Missing top */
.header { position: sticky; }

/* ✅ Must specify where to stick */
.header {
  position: sticky;
  top: 0;
}

Fix 2: Parent has overflow hidden

/* ❌ overflow: hidden on any ancestor breaks sticky */
.parent { overflow: hidden; }

/* ✅ Remove overflow or use overflow: visible */
.parent { overflow: visible; }

Fix 3: Parent has no height

The sticky element needs room to scroll within its parent. If the parent is exactly the height of the sticky element, there’s nowhere to stick.

Fix 4: Check all ancestors

Any ancestor with overflow: auto, overflow: scroll, or overflow: hidden can break sticky positioning.

Related resources

• CSS Flexbox & Grid cheat sheet
• CSS complete guide