Z-index and Stacking

Control intentional overlap within the same stacking context

1. Compare overlapping layers

The orange layer has z-index 3, blue has 2, and green has 1.
Green — 1
Orange — 3
Blue — 2

2. Stacking contexts contain children

The dark child has z-index 100, but it remains inside its parent layer at z-index 1. The orange sibling context at z-index 2 can still paint above it.
Parent context — 1
Child — 100
Sibling context — 2

A useful debugging order

  1. Confirm that overlap is intentional.
  2. Check source order before adding z-index.
  3. Compare z-index values inside the same stacking context.
  4. Inspect positioned ancestors when a large number has no effect.
  5. Use a small documented layer scale.

Important CSS

Z-index orders overlapping positioned boxes.

.back { position: relative; z-index: 1; }
.front { position: relative; z-index: 3; }