Sticky headers inside a scrolling list
At 100px the Fruits header has stuck at 0 while its items scroll under it. Its section is 230px tall (30 + 5 × 40), so at 300px the section has scrolled away and pushed its header up and out (−100), while the Vegetables header has stuck in its place. Scroll the list yourself to watch the hand-over.
The position property decides how a box is placed: static follows normal flow, relative shifts a box but keeps its space, absolute and fixed take it out of flow and place it against a containing block, and sticky lets it scroll until it hits an edge and then stay there.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A .photo card holds an <img> and a <span class="tag">New</span>. Put the tag 10px from the card's bottom-left corner.
Make an overlay that exactly covers its .hero parent with a half-transparent black layer.
Make a page header that stays visible at the top of the window while the page scrolls, without hiding the first line of content.
Explain it without notes
Explain the five values of position and whether each keeps the box in normal flow.
What is the containing block of an absolutely positioned element?
Why might a position: fixed element scroll with the page?
How does position: sticky work, and what are the common reasons it fails?
Why do developers put position: relative on a parent without any offsets?
Preview
Console
Nothing logged yet.Expected console output
scrolled 0 | Fruits at 0 | Vegetables at 230
scrolled 100 | Fruits at 0 | Vegetables at 130
scrolled 300 | Fruits at -100 | Vegetables at 0