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.

Practice

1. Which CSS property controls the stacking order of elements on a webpage?

easy

A. float

B. position

C. z-index

D. display

Solution

1. Step 1: Understand stacking order control

   The z-index property sets which element appears on top when elements overlap.

2. Step 2: Differentiate from other properties

   position sets how elements are positioned but does not control layering alone; display and float affect layout, not stacking order.

3. Final Answer:

   z-index -> Option C

4. Quick Check:

   Stack order = z-index [OK]

Hint: Remember: z-index controls front/back layering [OK]

Common Mistakes:

• Confusing position with z-index
• Thinking display controls layering
• Assuming float affects stacking

2. Which of the following is the correct way to make z-index work on an element?

easy

A. Set float: left;

B. Set position: static;

C. Set display: block;

D. Set position: relative; or absolute

Solution

1. Step 1: Identify position values that enable z-index

   Only elements with position set to relative, absolute, fixed, or sticky respond to z-index.

2. Step 2: Exclude static and other properties

   position: static is default and ignores z-index. display and float do not enable z-index.

3. Final Answer:

   Set position to relative or absolute -> Option D

4. Quick Check:

   z-index works only with positioned elements [OK]

Hint: Use relative or absolute position for z-index to work [OK]

Common Mistakes:

• Using position: static and expecting z-index to work
• Confusing display or float with position
• Not setting position at all

3. Given the CSS below, which element will appear on top?

div {
  position: relative;
}
#box1 {
  z-index: 5;
  background: red;
  width: 100px;
  height: 100px;
}
#box2 {
  position: absolute;
  z-index: 3;
  background: blue;
  width: 100px;
  height: 100px;
  top: 20px;
  left: 20px;
}

medium

A. The red box (#box1) appears on top

B. The blue box (#box2) appears on top

C. Both boxes appear side by side without overlap

D. Neither box appears because of missing position

Solution

1. Step 1: Check positions and z-index values

   #box1 has position: relative and z-index: 5. #box2 has position: absolute and z-index: 3.

2. Step 2: Compare z-index values

   Higher z-index means the element is closer to the front. 5 is greater than 3, so #box1 is on top.

3. Final Answer:

   The red box (#box1) appears on top -> Option A

4. Quick Check:

   Higher z-index = front [OK]

Hint: Higher z-index means element is on top [OK]

Common Mistakes:

• Assuming absolute position always appears on top
• Ignoring z-index values
• Thinking position type alone controls layering

4. Why does the z-index property not work on this element?

.popup {
  z-index: 10;
  background: yellow;
  width: 200px;
  height: 100px;
}

medium

A. Because z-index only works on elements with a position other than static

B. Because the background color is missing opacity

C. Because width and height are not set to 100%

D. Because z-index requires a parent with position relative

Solution

1. Step 1: Check element's position property

   The element has no position set, so it defaults to static.

2. Step 2: Understand z-index requirements

   z-index only works on elements with position set to relative, absolute, fixed, or sticky. Static elements ignore z-index.

3. Final Answer:

   z-index only works on positioned elements -> Option A

4. Quick Check:

   Position must be non-static for z-index [OK]

Hint: Set position to relative or absolute for z-index to work [OK]

Common Mistakes:

• Thinking background color affects z-index
• Believing width/height affect layering
• Assuming parent position is required

5. You have three overlapping elements with these styles:

#a { position: relative; z-index: 2; }
#b { position: absolute; z-index: 1; }
#c { position: relative; z-index: 3; }

How can you make #b appear on top without changing its z-index value?

hard

A. Change #b's position to relative and keep z-index 1

B. Wrap #b in a parent with higher z-index and position set

C. Set #a and #c to position: static

D. Increase #b's width and height

Solution

1. Step 1: Understand stacking context

   Elements create stacking contexts based on position and z-index. #b has z-index 1 but is inside its own stacking context.

2. Step 2: Use parent stacking context to raise #b

   Wrapping #b in a parent with a higher z-index and position creates a new stacking context that can appear above #a and #c without changing #b's z-index.

3. Final Answer:

   Wrap #b in a positioned parent with higher z-index -> Option B

4. Quick Check:

   Use parent stacking context to control layering [OK]

Hint: Use parent with higher z-index to raise child layering [OK]

Common Mistakes:

• Trying to change z-index of #b directly
• Changing position without stacking context
• Ignoring stacking contexts created by parents