The nearest positioned ancestor wins
First the middle box is static, so the badge skips it and uses .outer's padding box: right edge at 240 + 40 = 280, minus 24. Then the script makes .middle positioned and the badge moves into its corner. offsetParent is JavaScript's name for the nearest positioned ancestor.
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
containing block: outer | left 256 top 0
containing block: middle | left 236 top 20