Understand the web. Build it yourself.

Search

All six exercises / Exercise 05

Find the bug

The badge behind the next panel

Find the parent stacking context that controls the overlap.

Observe the evidence

Panel A and panel B form sibling stacking contexts. A badge with z-index: 999 belongs to panel A.

Starting code

CSS · EXAMPLE
.panel-a { position: relative; z-index: 1; }
.badge { position: absolute; z-index: 999; }
.panel-b { position: relative; z-index: 2; }
Give me a hint

Which two sibling groups are actually being compared?

Read the solution and corrected code
CSS · EXAMPLE
.panel-a { position: relative; z-index: 3; }
.badge { position: absolute; z-index: 999; }
.panel-b { position: relative; z-index: 2; }

A child cannot use z-index to escape its parent stacking context. Raising panel A changes the order of the two groups. This demo uses isolation to contain its layers within the exercise.

Make the lesson your own

Add a second badge to panel A and compare its order inside A with the order between A and B.

Read the related guide →

Original exercise by Mario V.W.B.R. Obst with AI assistance. Technical reference: MDN documentation (new tab). Checked September 2026.

Next exercise →