CodePark/ questions / Display, positioning & stacking
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Display, positioning & stacking

.a and .b are siblings that overlap. Which is painted on top: .a .child or .b?

.a        { position: relative; z-index: 1; }
.a .child { position: relative; z-index: 9999; }
.b        { position: relative; z-index: 2; }
.b, because .child is confined to .a's stacking context

.b is right, because .child is confined to .a's stacking context. .a has position: relative and z-index: 1, so it creates a stacking context at level 1. Think of it as a folder of layers. .child's 9999 only orders it inside the .a folder.

At the parent level,
.b with 2 beats .a with 1. So everything inside .a, including .child, sits below .b. The "9999 > 2" option is the tempting wrong answer, because it compares numbers from different stacking contexts.