Stacking context in CSS - Browser Rendering Trace

Render Flow - Stacking context

Parse CSS properties

↓

Detect stacking context triggers

↓

Create stacking context layer

↓

Sort elements by z-index within context

↓

Paint elements in stacking order

↓

Composite layers to screen

The browser reads CSS properties, detects when a stacking context is created, groups elements into layers, sorts them by z-index, paints them in order, and finally combines layers to display on screen.

Render Steps - 5 Steps

Code Added:<div class="parent"> ... </div> with no CSS

Before

[ ] (empty page)

→

After

[parent]
┌──────────────┐
│              │
│              │
│              │
└──────────────┘

The parent div appears as a block with default stacking context (root).

🔧 Browser Action:Creates DOM node and default stacking context

Code Sample

Two overlapping colored boxes inside a parent with z-index, showing how stacking context controls which box appears on top.

CSS

<div class="parent">
  <div class="child1">Box 1</div>
  <div class="child2">Box 2</div>
</div>

CSS

.parent {
  position: relative;
  z-index: 1;
  background: lightblue;
  width: 10rem;
  height: 6rem;
  padding: 1rem;
}
.child1 {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 4rem;
  height: 4rem;
  background: coral;
  z-index: 2;
}
.child2 {
  position: absolute;
  top: 2rem;
  left: 3rem;
  width: 4rem;
  height: 4rem;
  background: lightgreen;
  z-index: 3;
}

Render Quiz - 3 Questions

After applying step 4, which box appears on top inside the parent?

A The box with z-index 3 (child2)

B The box with z-index 2 (child1)

C They overlap evenly with no layering

D The parent box itself

Common Confusions - 3 Topics

Why does z-index only work on positioned elements?

Z-index only affects elements that create or belong to a stacking context, which requires position other than static. Without positioning, z-index is ignored visually.

💡 Only positioned elements respond to z-index layering (see step 2 and 3).

Why can’t a child with higher z-index appear above a parent’s sibling with lower z-index?

Because stacking contexts isolate children. A child’s z-index is relative only inside its stacking context, so it can’t escape to appear above elements in a different stacking context.

💡 Stacking contexts act like separate layers; children can’t jump outside (see step 5).

Why does opacity less than 1 create a stacking context?

Opacity less than 1 creates a new stacking context so the browser can composite the semi-transparent element separately, ensuring correct blending and layering.

💡 Transparency triggers stacking context to isolate effects.

Property Reference

Property	Value Triggering Stacking Context	Visual Effect	Common Use
position	relative, absolute, fixed, sticky + z-index not auto	Creates new stacking context isolating children’s z-index	Control layering inside containers
opacity	< 1	Creates stacking context to isolate transparency effects	Fade effects without affecting outside layers
transform	any value other than none	Creates stacking context for 3D and layering	Animations and 3D transforms
z-index	value other than auto on positioned elements	Controls stacking order within stacking context	Bring elements forward or backward
mix-blend-mode	any value other than normal	Creates stacking context for blending effects	Visual blending isolation

Concept Snapshot

Stacking context is a layer in the browser that groups elements for layering. Created by properties like position + z-index, opacity < 1, transform. Elements inside a stacking context stack by z-index relative to each other. Stacking contexts isolate children so they can't escape layering order. Understanding stacking context helps control which elements appear on top.