What does position: sticky do?

CSSJunior~1 min read

position: sticky combines the behavior of relative and fixed.

How it works:

while the element within the visible area has not reached the threshold, it behaves like relative: it stays in the flow and occupies its place;
when, during scrolling, it reaches the given value of top, left, right, or bottom, it "sticks" and behaves like fixed, staying on screen.

Example:

css

header {
  position: sticky;
  top: 0;
}

Features:

the element stays in the flow (unlike fixed);
the top/bottom coordinates are required for it to trigger;
"sticking" works within its own scrollable container, not the whole page.

Summary: sticky is a positioning mode in which the element stays in the flow but becomes fixed on screen while scrolling once it reaches a given threshold.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.