Widely available A strong choice for navigation aids and section labels that should stay nearby while users scroll.

Sticky positioning

Sticky positioning behaves like relative positioning until a threshold is reached, then the element sticks in place within its scroll container. It is ideal for local navigation and contextual headers.

LayoutPositioningScrolling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.position.position_sticky_table_elements
56
16
59
8
56
8
CSS property
sticky
56
16
32
13
56
13
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Borders do not display on table headers if `border-collapse` is set to `collapse` (bug 1727594).
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)

Syntax

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

/* Sticking the table header */
thead th {
  position: sticky;
  top: 0;
}

Live demo

sticky-header

Sticky positioning sticky-header demo.

PreviewFullscreen

sticky-sidebar

Sticky positioning sticky-sidebar demo.

PreviewFullscreen

sectionheadinglock

Sticky positioning sectionheadinglock demo.

PreviewFullscreen

Use cases

  • Section headers

    Keep category labels or group titles visible while users browse long grouped content.

  • Local side navigation

    Maintain a nearby table of contents or filter panel without pinning it to the viewport globally.

Cautions

  • Sticky positioning fails if ancestor overflow or sizing rules block the effect.
  • Sticky elements can cover content if their offset and background are not designed carefully.

Accessibility

  • Sticky UI should remain visible without obscuring the currently focused or read content.

Related links