Z-index basics in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the stacking order of these elements?

Consider three overlapping boxes with the following CSS:

  .box1 { position: relative; z-index: 2; }
  .box2 { position: relative; z-index: 5; }
  .box3 { position: relative; z-index: 1; }

Which box will appear on top?

A box2 will be on top

B box1 will be on top

C box3 will be on top

D All boxes will have the same stacking order

💡 Hint

Higher z-index means the element is closer to the viewer.

The element with the highest z-index value appears on top when elements overlap.

🧠 Conceptual

intermediate

What happens if z-index is set on a static element?

Given an element with position: static; and z-index: 10;, what will happen?

A The element will be stacked above others with lower z-index

B The element will become positioned automatically

C The element will disappear from the page

D The z-index will be ignored because position is static

💡 Hint

z-index only works on positioned elements (relative, absolute, fixed, sticky).

z-index has no effect on elements with position: static; because they are not positioned.

📝 Syntax

advanced

Identify the invalid z-index value

Which of the following CSS z-index values is invalid?

A z-index: 1.5;

B z-index: -1;

C z-index: auto;

D z-index: 100;

💡 Hint

z-index accepts integers or 'auto', but not decimals.

z-index must be an integer or 'auto'. Decimal values like 1.5 are invalid.

❓ optimization

advanced

How to simplify stacking context for better performance?

You have many nested elements with different z-index values creating complex stacking contexts. What is the best way to optimize rendering performance?

A Increase all z-index values to very high numbers

B Use fewer positioned elements and avoid unnecessary z-index values

C Use only static positioning and no z-index

D Add z-index to every element regardless of position

💡 Hint

Complex stacking contexts can slow down rendering.

Reducing positioned elements and unnecessary z-index values simplifies stacking contexts and improves performance.

🔧 Debug

expert

Why does this element not appear above another despite higher z-index?

Given these CSS rules:

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

Why might .child1 not appear above .sibling even though it has a higher z-index?

A <code>.child1</code> z-index is ignored because it is absolutely positioned

B <code>.sibling</code> has a higher z-index than <code>.child1</code> so it appears on top

C <code>.child1</code> is inside <code>.parent</code> which has lower z-index than <code>.sibling</code>, so stacking context limits it

D The browser ignores z-index when elements overlap

💡 Hint

Stacking contexts are created by positioned elements with z-index.

Because .child1 is inside .parent with z-index 1, it cannot escape that stacking context. .sibling is outside with z-index 2, so it appears above.

Practice

1. What does the CSS property z-index control?

easy

A. The stacking order of overlapping elements

B. The font size of text

C. The background color of elements

D. The margin space around elements

Solution

1. Step 1: Understand the purpose of z-index

   The z-index property is used to control which elements appear on top when they overlap.

2. Step 2: Compare with other CSS properties

   Font size, background color, and margin do not affect stacking order.

3. Final Answer:

   The stacking order of overlapping elements -> Option A

4. Quick Check:

   z-index controls stacking order [OK]

Hint: Remember: z-index = which element is on top [OK]

Common Mistakes:

• Confusing z-index with color or size properties
• Thinking z-index changes element size
• Assuming z-index works without positioning

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

easy

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

B. display: block; z-index: 10;

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

D. margin: 10px; z-index: 10;

Solution

1. Step 1: Check which positions allow z-index

   Only positioned elements (relative, absolute, fixed, sticky) respond to z-index.

2. Step 2: Identify correct syntax

   Position must not be static (default). So position: relative with z-index works.

3. Final Answer:

   position: relative; z-index: 10; -> Option A

4. Quick Check:

   z-index works only with positioned elements [OK]

Hint: z-index needs position other than static [OK]

Common Mistakes:

• Using z-index without setting position
• Assuming display affects stacking
• Using margin or padding with z-index expecting effect

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

div.a { position: relative; z-index: 5; }
div.b { position: relative; z-index: 10; }

medium

A. div.a will be on top

B. div.b will be on top

C. Both will appear side by side

D. Neither will overlap

Solution

1. Step 1: Compare z-index values

   div.a has z-index 5, div.b has z-index 10. Higher z-index means on top.

2. Step 2: Confirm both are positioned

   Both have position: relative, so z-index applies.

3. Final Answer:

   div.b will be on top -> Option B

4. Quick Check:

   Higher z-index = top element [OK]

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

Common Mistakes:

• Ignoring position property
• Thinking lower z-index is on top
• Assuming elements don't overlap

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

.box { z-index: 100; }

medium

A. Because z-index requires a background color

B. Because z-index only works on inline elements

C. Because the element has no position set or is static

D. Because z-index only works on elements with margin

Solution

1. Step 1: Check element positioning

   By default, elements have position: static, which ignores z-index.

2. Step 2: Understand z-index requirements

   z-index only works if position is relative, absolute, fixed, or sticky.

3. Final Answer:

   Because the element has no position set or is static -> Option C

4. Quick Check:

   z-index needs non-static position [OK]

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

Common Mistakes:

• Assuming z-index works without position
• Thinking z-index depends on background color
• Believing margin affects stacking order

5. You have three overlapping elements with these styles:

.one { position: relative; z-index: 1; }
.two { position: absolute; z-index: 3; }
.three { position: relative; z-index: 2; }

Which order will they stack from bottom to top?

hard

A. .one, .two, .three

B. .two, .three, .one

C. .three, .one, .two

D. .one, .three, .two

Solution

1. Step 1: List elements with their z-index

   .one = 1, .three = 2, .two = 3.

2. Step 2: Order by ascending z-index

   Lower z-index is below higher z-index, so stacking is .one (bottom), .three (middle), .two (top).

3. Final Answer:

   .one, .three, .two -> Option D

4. Quick Check:

   Stack order = ascending z-index [OK]

Hint: Stack from lowest to highest z-index [OK]

Common Mistakes:

• Ignoring absolute vs relative position effect
• Mixing up stacking order direction
• Assuming position type changes z-index order