Relative keeps its space; absolute leaves the flow
.rel is drawn 20px right and 10px down, but .next still starts at 40px: the relative box's original space is kept. .abs is out of flow and sits 10px from the stage's top and right edges: 280 − 10 − 90 = 180.
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
rel left 20 top 10
next left 0 top 40
abs left 180 top 10