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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
position sticky table elements | 56 | 16 | 59 | 8 | 56 | 8 |
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
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.