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.

Practice

1. What creates a new stacking context in CSS?

easy

A. An element with color property set

B. An element with position: relative and z-index set

C. Any element with display: block

D. An element with margin applied

Solution

1. Step 1: Understand stacking context creation

   A stacking context is created by elements with position other than static and a z-index value set.

2. Step 2: Analyze options

   Only An element with position: relative and z-index set mentions position: relative with z-index, which creates a stacking context. Other options do not create stacking contexts.

3. Final Answer:

   An element with position: relative and z-index set -> Option B

4. Quick Check:

   Stacking context = position + z-index [OK]

Hint: Look for position plus z-index to spot stacking contexts [OK]

Common Mistakes:

• Thinking any positioned element creates stacking context without z-index
• Confusing display or color properties with stacking context
• Assuming margin affects stacking order

2. Which CSS snippet correctly creates a stacking context?

easy

A. position: static; z-index: 10;

B. display: inline; z-index: 3;

C. position: relative; z-index: 5;

D. color: red; z-index: 1;

Solution

1. Step 1: Check position and z-index combination

   Only elements with position other than static and a z-index value create stacking contexts.

2. Step 2: Evaluate each option

   position: relative; z-index: 5; uses position: relative and z-index: 5, which correctly creates a stacking context. Others either have static position or irrelevant properties.

3. Final Answer:

   position: relative; z-index: 5; -> Option C

4. Quick Check:

   Position relative + z-index creates stacking context [OK]

Hint: Position must not be static to create stacking context [OK]

Common Mistakes:

• Using position static with z-index expecting stacking context
• Assuming display or color create stacking contexts
• Ignoring that inline elements don't create stacking contexts with z-index

3. Given this HTML and CSS, which element appears on top visually?

<div class='parent'>
  <div class='child1'>Child 1</div>
  <div class='child2'>Child 2</div>
</div>

.parent { position: relative; z-index: 1; }
.child1 { position: absolute; z-index: 2; }
.child2 { position: absolute; z-index: 1; }

medium

A. Parent appears on top of children

B. Child 2 appears on top

C. Both overlap equally, no stacking order

D. Child 1 appears on top

Solution

1. Step 1: Identify stacking contexts

   The parent has position: relative and z-index: 1, creating a stacking context. Children stack inside this context.

2. Step 2: Compare children's z-index inside stacking context

   Child 1 has z-index: 2, child 2 has z-index: 1. Higher z-index means it appears on top.

3. Final Answer:

   Child 1 appears on top -> Option D

4. Quick Check:

   Higher z-index inside stacking context = on top [OK]

Hint: Higher z-index inside same stacking context is on top [OK]

Common Mistakes:

• Ignoring stacking context created by parent
• Assuming parent overlays children
• Confusing absolute positioning with stacking order

4. Why does this CSS not create a stacking context as expected?

.box { position: absolute; }

What is missing?

medium

A. Missing z-index property

B. Position should be static

C. Need display: block

D. Color property must be set

Solution

1. Step 1: Understand stacking context requirements

   Positioned elements create stacking contexts only if z-index is set.

2. Step 2: Analyze given CSS

   The element has position: absolute but no z-index, so no stacking context is created.

3. Final Answer:

   Missing z-index property -> Option A

4. Quick Check:

   Position alone doesn't create stacking context without z-index [OK]

Hint: Position plus z-index needed for stacking context [OK]

Common Mistakes:

• Assuming position absolute alone creates stacking context
• Thinking display or color affect stacking context
• Confusing static position with stacking context creation

5. You have nested elements:

<div class='outer'>
  <div class='inner'>Content</div>
</div>

CSS:

.outer { position: relative; z-index: 1; }
.inner { position: relative; z-index: 10; }

Which statement is true about their stacking order?

hard

A. Inner's z-index 10 stacks only inside outer's stacking context

B. Inner's z-index 10 places it above all elements outside outer

C. Outer and inner share the same stacking context ignoring z-index

D. Inner's z-index is ignored because outer has lower z-index

Solution

1. Step 1: Identify stacking contexts

   The outer element creates a stacking context with position: relative and z-index: 1. The inner element creates a new stacking context inside outer with position: relative and z-index: 10.

2. Step 2: Understand stacking context isolation

   Inner's stacking order is only relative to siblings inside outer's stacking context. It cannot escape outer's stacking context to appear above elements outside it.

3. Final Answer:

   Inner's z-index 10 stacks only inside outer's stacking context -> Option A

4. Quick Check:

   Nested stacking contexts isolate z-index scope [OK]

Hint: Nested stacking contexts isolate z-index effects [OK]

Common Mistakes:

• Thinking inner z-index affects outside elements
• Assuming stacking contexts merge ignoring nesting
• Believing outer's lower z-index cancels inner's stacking