position offers four classic values, but a fifth one joined the family later: sticky. It promises the best of both worlds, an element that follows the page normally, then locks in place at the right moment, like a section heading that stays visible while its content scrolls past.
It is also one of the most frustrating CSS properties to debug, because it sometimes appears to do absolutely nothing, with no error shown anywhere to explain why.
Definition
position: sticky is a hybrid between relative and fixed. The element behaves normally, as if it were relative, until the page scroll reaches the threshold set by top, bottom, left, or right. At that exact moment, it locks into that position, the way a fixed element would, but only within the boundaries of its parent container.
Minimal syntax
.section-title {
position: sticky;
top: 0;
background-color: white;
}The offset is not optional: without top, bottom, left, or right, the browser has no threshold to watch, and the element behaves like a plain relative one, never locking in place. top: 0 is by far the most common case: the element sticks to the top edge of its scrolling area.
The classic trap: overflow or a constrained height on a parent
sticky only works inside its nearest ancestor that scrolls. If a single parent, anywhere between the element and that scrolling area, carries overflow set to hidden, auto, or scroll, or a fixed height smaller than its content, the browser treats that parent as the new reference area, and the sticky effect disappears silently, with no warning in the console.
/* This parent breaks its child's sticky behaviour */
.container {
overflow: hidden;
}
.section-title {
position: sticky;
top: 0;
}The fix almost always consists of removing that overflow from the offending parent, or moving it further up the tree, to a level where it no longer blocks the sticky element's path to its real scrolling area.
Common use cases
sticky shows up on a table header that stays visible while a long list scrolls, on a table of contents that follows an article as it is read, or on the group headings of a contact list sorted by letter, which replace one another as the page scrolls. In all three cases, z-index matters too: without it, the locked element can end up hidden beneath content scrolling over it.
Frequently asked questions
My sticky element never locks in place, what should I check first?
Three causes cover most cases: a missing offset such as top, a parent with an overflow other than visible somewhere between the element and the window, or a container whose height is too short to leave room for the scroll inside which the element could lock in place.
Does sticky remove the element from the flow like absolute does?
No, and that is exactly what makes it useful. The element keeps its reserved spot in the layout as long as it has not locked in place, unlike an absolute element, which leaves the flow from the start. This two-phase behaviour is what makes sticky a hybrid rather than just a variant of fixed.
Can sticky use both top and bottom at the same time?
Yes, and it is useful inside a container that scrolls on its own: the element locks at the top while scrolling down, then, if the available space shrinks, it can re-attach to the bottom of its container instead of leaving the visible area. This case stays rare in practice, mostly reserved for tall internal scrolling areas.