CSS Z-index and Stacking

When elements overlap, CSS painting order and stacking contexts decide which one appears on top.

z-index assigns a stacking level to positioned elements and also works on flex or grid items. Larger values are generally painted above smaller ones within the same stacking context. Properties such as transform and non-default opacity can create new stacking contexts.

A child with z-index:9999 cannot necessarily overtake a sibling in a higher parent stacking context. Keep layering values small and intentional rather than endlessly raising them.

Compare elements in the same stacking context first; child stacking values cannot escape a lower parent context.

Use explicit z-index to keep the label above the decorative panel.

HTML

<div class="layer-stage"><div class="layer blue">Background</div><div class="layer amber">Foreground</div></div>

CSS

.layer-stage { position: relative; height: 110px; max-width: 320px; background: #f8fafc; border-radius: 8px; }
.layer { position: absolute; height: 72px; width: 160px; border-radius: 8px; padding: 12px; font-weight: 700; }
.layer.blue { left: 8px; top: 8px; background: #bfdbfe; z-index: 1; }
.layer.amber { left: 92px; top: 27px; background: #fde68a; z-index: 2; }

Rendered output

Observe: The yellow card paints over the blue card where their boxes overlap.

Raise the first element’s stacking level instead.

HTML

<div class="layer-stage"><div class="layer blue">Now on top</div><div class="layer amber">Behind</div></div>

CSS

.layer-stage { position: relative; height: 110px; max-width: 320px; background: #f8fafc; border-radius: 8px; }
.layer { position: absolute; height: 72px; width: 160px; border-radius: 8px; padding: 12px; font-weight: 700; }
.layer.blue { left: 8px; top: 8px; background: #bfdbfe; z-index: 3; }
.layer.amber { left: 92px; top: 27px; background: #fde68a; z-index: 1; }

Rendered output

Observe: The blue card now covers part of the yellow card even though it appears earlier in the HTML.

Compare elements in the same stacking context first; child stacking values cannot escape a lower parent context.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A huge z-index does not automatically escape a parent stacking context.
• z-index has different effects depending on positioning and stacking contexts; inspect the computed values.

Change the two z-index values and draw the paint order. Add transform:translateZ(0) to a parent and investigate its stacking context.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Treat z-index as a local stacking-order tool, not as a universal depth number.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.