Painting order and z-index
elementFromPoint(x, y) returns the top element at a point of the page, so it tells us who won. b comes after a in the HTML but a has z-index: 3. c (z-index 1) beats b (auto). Each box's opacity: 0.9 makes it a stacking context, which is harmless here because the boxes have no children that need to escape.
When boxes overlap, the browser paints them in a fixed order; z-index changes that order for positioned boxes, but only among siblings in the same stacking context, which is why a child with z-index: 9999 can still be stuck under another element.
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.
Make a .card whose decorative ::before blob sits behind the card's text but above the page background, using a negative z-index.
Two absolutely positioned boxes .first and .second overlap; .second is later in the HTML. Make .first appear on top without changing the HTML order.
A .site-header with position: sticky should stay above every card on the page, including cards with hover transforms. Write the CSS.
Explain it without notes
What is a stacking context, and how does it limit z-index?
List several CSS properties that create a stacking context.
Describe the default painting order inside one stacking context.
A dropdown has z-index: 9999 but appears under a banner with z-index: 2. How do you debug and fix it?
Preview
Console
Nothing logged yet.Expected console output
(60, 40) a and b overlap -> a
(140, 90) b and c overlap -> c
(100, 70) all three overlap -> a