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.