Overlapping items and z-index
The caption is later in the HTML than the photo, so it's on top. The badge comes first in the HTML, so it would be hidden under the photo, but z-index: 1 lifts it. Delete the z-index line and run: the badge disappears behind the photo.
You place a grid item by naming the lines it starts and ends on (grid-column: 1 / 3), by saying how many tracks it spans (span 2), or by counting from the end with negative numbers (1 / -1); items may overlap, and later items or a higher z-index paint on top.
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.
In a 3-column grid, make the first item a full-width header and the last item a full-width footer, whatever the number of columns.
Make the featured photo in a 4-column gallery cover two columns and two rows, starting in the top-left corner.
Put a text label over the bottom of an image using grid overlap, with no position: absolute.
Explain it without notes
Explain the difference between grid-column: 2 / 4 and grid-column: 2 / span 2, and when you'd use span alone.
What does grid-column: 1 / -1 do, and when doesn't it reach the last visible column?
In what order does grid-area: 1 / 2 / 3 / 4 give its four lines?
How can two grid items overlap, and how do you control which one is on top?
Preview
Console
Nothing logged yet.Expected console output
at the centre of .caption the top element is caption
at the centre of .badge the top element is badge
photo grid-area: 1 / 1 / 3 / 3