patterncssMajor

position: sticky requirements — all must be met

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

stickyposition stickyscrolloverflowstuckheader

Problem

An element with position: sticky does not stick — it scrolls away like a normal element.

Solution

All of the following must be true for sticky to work:

.sticky-header {
  position: sticky;
  top: 0; /* threshold offset is REQUIRED — sticky won't work without it */
}

/* The parent must have:
   1. A defined height (or content that causes overflow)
   2. NOT overflow: hidden or overflow: auto (which clips sticky)
   3. Enough scrollable content past the sticky element
*/

/* Common full-page sticky nav pattern */
body {
  /* no overflow: hidden here */
}

nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

Why

Sticky positioning works within its scroll container. The element sticks relative to the nearest scrolling ancestor. If that ancestor has overflow: hidden or a fixed height with no scroll, the sticky element has nowhere to stick.

Gotchas

A sticky element only sticks within the bounds of its parent — once the parent scrolls out of view, the sticky element goes with it.
overflow: hidden on any ancestor will break sticky positioning.
The offset property (top, left, etc.) is mandatory — without it the element won't stick even if everything else is correct.
In Safari, position: -webkit-sticky may be needed for older versions.

Context

Implementing sticky navigation bars, table headers, or sidebars.

Revisions (0)

No revisions yet.