Absolute positioning and the containing block
With position: relative on the card, the badge sits in the card's corner. Make the card static and the badge jumps to the corner of the page, because no ancestor is positioned (its offsetParent becomes <body>).
The CSS questions interviewers ask most (specificity, the box model, Flexbox vs Grid, positioning and block formatting contexts) each have a short, precise model answer; learn the answer, the example that proves it, and the follow-up they usually ask next.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Order these selectors from weakest to strongest: ul li a, .menu a, #top a, :where(#top) a.link, a:hover.
A box has width: 300px; padding: 16px; border: 2px solid; margin: 10px; with default box-sizing. How wide is it on screen, and how much horizontal space does it take including margins? What changes with border-box?
Write CSS to place a close button in the top-right corner of a .modal, 8px from each edge.
Explain it without notes
How is CSS specificity calculated? Give examples, including :is(), :where() and inline styles.
Explain the CSS box model and the difference between content-box and border-box.
When would you use Flexbox and when Grid?
Explain the values of position and what the containing block is for each.
What is a block formatting context, how do you create one, and what problems does it solve?
Preview
Console
Nothing logged yet.Expected console output
offsetParent: card
after card is static: body