CSS position: sticky, Explained
How CSS position: sticky actually works, the threshold offsets that control it, and the layout rules every sticky element depends on.
6 min read - Updated 2026-06-18
position: sticky is a hybrid of relative and fixed positioning: an element scrolls normally until it reaches a threshold, then sticks in place within its container. Get the threshold and container rules right and it just works - miss one and it silently does nothing.
How sticky positioning behaves
A sticky element stays in the normal flow and scrolls with the page until its offset threshold is crossed, at which point it pins relative to the nearest scrolling ancestor. It un-sticks again when its containing block scrolls out of view.
It is positioned relative until the threshold, then fixed-like
It is constrained to its parent - it never escapes the container
It only pins within the scroll area of its nearest scrolling ancestor
Multiple sticky siblings can stack or replace each other as you scroll
You must set a threshold offset
Sticky does nothing without at least one of top, right, bottom, or left. That offset is the distance from the scroll-container edge where the element should stop and stick.
top: 0 pins the element to the top once it reaches the viewport edge
Use bottom for footers and reading-progress bars
Account for fixed headers by adding their height to the offset
Combine with scroll-margin to fine-tune anchored sections
The container rules that make or break it
Most sticky failures come from an ancestor, not the element itself. A parent with the wrong overflow value or a height that is too short stops sticky from ever engaging.
No ancestor between element and scroll root can have overflow hidden/auto/scroll
The parent needs enough height for the element to travel and stick
Sticky is scoped to its direct parent's box, so a short parent ends it early
Flex and grid children can stick, but the container still needs room
Release checklist
Set at least one threshold offset (top/bottom/left/right).
Audit every ancestor for overflow values that clip sticky.
Confirm the parent is tall enough for the element to travel.
Test the sticky behavior at mobile, tablet, and desktop widths.
Frequently asked questions
What does position: sticky do?
It keeps an element in normal flow until it reaches a defined offset (like top: 0) during scroll, then pins it in place within its containing block until that container scrolls away.
Why is my sticky element not sticking?
The two most common causes are a missing threshold offset (you must set top, bottom, left, or right) and an ancestor with overflow: hidden, auto, or scroll that creates a new scroll context. A parent that is too short also ends sticking early.
What is the difference between sticky and fixed?
Fixed elements are removed from flow and stay relative to the viewport everywhere. Sticky elements stay in flow, only pin after crossing a threshold, and are constrained to their parent container.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.