A transform breaks position: fixed
.f1 is pinned to the viewport's top-left corner. .f2 has the same CSS, but its parent has a transform, which makes the parent its containing block: it lands at the parent's corner (60px in, 50px down) and would scroll with the page.
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
.f1 left 0 top 0
.f2 left 60 top 50