In CSS, how does position: sticky differ from position: fixed for a page header?

## Two questions every positioning scheme answers When you set `position` on an element you are answering two separate questions: does this box still take up space in normal flow, and what is it offset against? `fixed` and `sticky` give opposite answers to the first and different answers to the second, which is why they look similar on screen and behave nothing alike. ## position: fixed — out of flow, anchored to the viewport `position: fixed` takes the box out of normal flow. Its former space collapses, so whatever followed it in the document moves up. The box is then offset against the viewport, using `top`, `right`, `bottom`, `left` (or the `inset` shorthand). Because it never participates in flow again, it stays exactly where you put it no matter how far the page scrolls, and it overlaps whatever scrolls underneath. The practical consequence is that you usually have to compensate for the missing space yourself, typically with padding on the page body equal to the header height: ```css .site-header { position: fixed; inset: 0 0 auto 0; /* top, right, bottom, left */ } body { padding-block-start: 4rem; /* the space the fixed header no longer reserves */ } ``` ## position: sticky — in flow, then constrained `position: sticky` does not remove the box from flow. Its space is reserved, its siblings lay out around it as if nothing special happened, and until the scroll threshold is met it renders in its normal-flow position — identical to `position: relative` with no offsets. What makes it stick is the inset value. `top: 0` says: this box's top edge may never be more than 0 from the top edge of the scrollport it lives in. While scrolling has not yet pushed it there, nothing happens. Once scrolling would carry it past that line, the browser offsets the box visually so the constraint holds. Crucially, this is a visual offset — the reserved space in flow does not move, which is exactly why nothing jumps when the element becomes stuck. ```css .section-header { position: sticky; top: 0; /* required: with no inset there is no threshold to stick to */ } ``` ## The two boundaries a sticky box lives between A sticky box is bounded on both ends. On one side is the **scroll container**: the nearest ancestor that scrolls. If some wrapper between the element and the page is a scroll container, that wrapper's scrollport is what the element sticks inside — not the viewport. If nothing between the element and the root scrolls, it sticks against the page scrollport, which is what most people expect. On the other side is the **containing block**: the sticky box can never be shifted outside it. Once the parent's edge reaches the threshold, the box stops holding position and rides the parent out of view. This is the behaviour people describe as "the sticky header stopped working halfway down" — it is the specified behaviour, and it is what makes per-section sticky headers possible at all. A fixed box has neither boundary. It answers only to the viewport. ## Choosing between them Pick `fixed` when the element must be visible for the whole page regardless of where the user is: a persistent toolbar, a floating action button, a chat launcher. Accept that you own the layout compensation for the space it no longer occupies. Pick `sticky` when the element belongs to a region and should only lead that region: a table's column headers, a section heading in a long article, a sidebar that follows while its column lasts, a filter bar above a list. You get the pinning without reserving space by hand and without the content jump when it engages. ## The things people get wrong Sticky is not "fixed with an offset". The two differ in flow participation, in what they are measured against, and in whether an ancestor can scope or silently disable them. Sticky also does nothing at all if you forget the inset, because there is no threshold to enforce — and it does nothing if an ancestor turns into a scroll container that never scrolls, because the element is then sticking inside a box whose scroll position never changes.