Stacking context in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What creates a new stacking context?

Which CSS property value combination creates a new stacking context for an element?

A position: relative; z-index: auto;

B opacity: 1;

C display: block;

D position: absolute; z-index: 0;

💡 Hint

Think about when z-index actually creates a stacking context.

A new stacking context is created when an element is positioned (relative, absolute, fixed, sticky) and has a z-index value other than auto. Option D has position: absolute and z-index: 0, which creates a new stacking context.

Option D has z-index: auto, so no new stacking context. Option D with opacity: 1 does not create stacking context. Option D does not create stacking context.

📝 Syntax

intermediate

Which CSS snippet correctly creates a stacking context?

Select the CSS snippet that correctly creates a stacking context on an element.

A div { display: flex; }

B div { opacity: 1; }

C div { position: fixed; z-index: 10; }

D div { position: static; z-index: 5; }

💡 Hint

Remember that position must not be static for z-index to create stacking context.

Option C creates a stacking context because position: fixed with a z-index value creates a new stacking context.

Option C has position: static, so z-index is ignored and no stacking context is created.

Option C with opacity: 1 does not create stacking context (opacity less than 1 does).

Option C with display: flex does not create stacking context by itself.

❓ rendering

advanced

Visual stacking order with nested stacking contexts

Given the following HTML and CSS, which element will appear on top visually?

CSS

HTML:
<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

CSS:
.parent {
  position: relative;
  z-index: 1;
  background: lightblue;
  width: 200px;
  height: 200px;
}
.child1 {
  position: relative;
  z-index: 2;
  background: coral;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.child2 {
  position: relative;
  z-index: 1;
  background: lightgreen;
  width: 100px;
  height: 100px;
  margin: 50px;
}

A Child 1 appears on top of Child 2

B Child 2 appears on top of Child 1

C Both children appear at the same level, overlapping equally

D Parent appears on top of both children

💡 Hint

Look at the z-index values and stacking contexts of parent and children.

The parent has position: relative and z-index: 1, creating a stacking context. Inside it, child1 has z-index: 2 and child2 has z-index: 1. Since both children are in the same stacking context, child1 with higher z-index appears on top.

❓ selector

advanced

Which CSS selector targets elements creating stacking contexts?

Which CSS selector matches elements that create a stacking context due to opacity less than 1 (e.g., opacity: 0.99)?

A *[style*="opacity:"]

B *[style*="opacity: 0.99"]

C *[style*="opacity: 0.5"]

D *[style*="opacity: 0"]

💡 Hint

Stacking context is created when opacity is less than 1.

Option B matches elements with opacity 0.99, which is less than 1, so these elements create stacking contexts due to opacity.

Option B matches any opacity but does not guarantee less than 1. Options C and D match other specific values less than 1, but B is the selector for opacity: 0.99 as example.

❓ accessibility

expert

How does stacking context affect keyboard navigation?

Which statement best describes how stacking context can impact keyboard navigation and accessibility?

A Stacking context does not affect keyboard navigation order but can affect visual focus indication.

B Elements in higher stacking contexts are always focused first when tabbing.

C Elements with lower z-index are skipped by screen readers.

D Keyboard navigation order is determined by z-index values.

💡 Hint

Think about how keyboard focus moves and what stacking context controls.

Stacking context controls visual layering, not the order of keyboard navigation. Keyboard navigation follows the DOM order or tabindex attributes. However, stacking context can affect how visible the focus outline is, impacting accessibility.

Options B, C, and D incorrectly link stacking context to keyboard focus order or screen reader behavior.

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