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.