Sticky Element
An element that scrolls normally until reaching a threshold, then stays fixed — ideal for headers, sidebars, and table column headers.
Plain English
A sticky element is the middle ground between a static element (scrolls away) and a fixed element (always visible regardless of context). With position: sticky, an element behaves normally in flow until it reaches its threshold (e.g., top: 0) — then it sticks in place. Crucially, it remains within its parent container: when you scroll past the parent, the sticky element scrolls away too. This makes it perfect for section headers in a long page, table headers in a scrollable table, or a sidebar that follows you down an article but stops at the footer.
Technical
position: sticky; top: 0; (a top/bottom/left/right value is required — without it, sticky has no effect). The element stays within its scrolling ancestor. Common pitfall: overflow: hidden or overflow: auto on any ancestor breaks sticky positioning. For sticky table headers: thead th { position: sticky; top: 0; z-index: 1; background: white; }. For nav bars: add a background-color and z-index to prevent content showing through.
Live Demo
Scroll the list below ↓
`position: sticky` keeps elements in flow and sticks within their scroll parent — no parent overflow: hidden allowed.
Usage
✓ Good usage
A data table with sticky column headers — as users scroll through 200 rows of data, the column labels stay visible so they always know which column they are reading.
✗ Bad usage
A sticky element with no background — as content scrolls underneath, the text from both layers overlaps and becomes unreadable.
Recommended values
- position: sticky + top: 0 (required)
- z-index: 10 to stay above content
- Background: opaque — prevent content bleeding through
- Check: no overflow: hidden on any ancestor
- Box-shadow: 0 1px 4px rgba(0,0,0,0.1) — signals stickiness
- Transition: box-shadow appears when element becomes sticky
Common mistakes
- Missing top/bottom value — position: sticky alone has no effect; you must specify a threshold.
- Ancestor with overflow: hidden — this is the most common debugging trap; sticky will not work if any ancestor clips overflow.
- No background on sticky element — content scrolling underneath makes the sticky element unreadable.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Make the table headers sticky. Apply position: sticky; top: 0; z-index: 1 to all th elements. Add a white background to prevent row data bleeding through. Add a subtle bottom border that appears when the header is stuck. Ensure no ancestor has overflow: hidden.