Common layering issues in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding stacking context in CSS

Which CSS property creates a new stacking context that affects layering of elements?

A opacity: 0.9;

B z-index: auto;

C position: static;

D display: block;

💡 Hint

Think about properties that change how browsers group elements for layering.

Setting opacity less than 1 creates a new stacking context, affecting layering.

📝 Syntax

intermediate

Fixing z-index layering error

What is the output layering order of these elements if the CSS is applied as below?

CSS

div.a { position: relative; z-index: 1; }
div.b { position: relative; z-index: 0; }
div.c { position: relative; z-index: 2; }

A c on top, a in middle, b at bottom

B a on top, b in middle, c at bottom

C b on top, c in middle, a at bottom

D a, b, c all layered equally

💡 Hint

Higher z-index means element is layered above lower z-index.

Elements with higher z-index appear on top when positioned.

❓ rendering

advanced

Why does a child element appear behind its parent?

Given this CSS, why does the child div appear behind the parent even though it has a higher z-index? .parent { position: relative; z-index: 1; } .child { position: absolute; z-index: 10; opacity: 0.5; }

A Because absolute positioning disables z-index

B Because z-index only works on static positioned elements

C Because opacity creates a new stacking context, limiting layering within parent

D Because parent has higher z-index, child cannot be above

💡 Hint

Opacity affects stacking contexts and layering boundaries.

Opacity less than 1 creates a new stacking context, so child layering is limited inside parent.

❓ selector

advanced

Which CSS selector fixes layering conflict by isolating stacking context?

You want to isolate an element's layering so it doesn't interfere with siblings. Which CSS rule achieves this?

A element { position: static; }

B element { transform: translateZ(0); }

C element { display: inline; }

D element { z-index: -1; }

💡 Hint

Some CSS properties create new stacking contexts by triggering GPU acceleration.

Using transform: translateZ(0); creates a new stacking context isolating layering.

❓ accessibility

expert

How to ensure layered elements remain accessible?

When layering elements with z-index, what is the best practice to keep content accessible to keyboard users?

A Use tabindex="-1" on all layered elements to prevent focus

B Use very high z-index values to force focus on top elements

C Hide all layered elements with display:none to avoid confusion

D Ensure layering order matches logical reading order and use ARIA roles

💡 Hint

Think about how keyboard users navigate and how screen readers read content.

Layering should not break logical order. Use ARIA roles and proper focus management for accessibility.