Z-index stacking control in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the stacking order of elements with these Tailwind classes?

Consider three div elements with the following Tailwind CSS classes applied:

• Element A: relative z-10
• Element B: absolute z-20
• Element C: fixed z-5

Which element will appear on top of the others?

A All elements have the same stacking order because z-index only works with relative positioning.

B Element C appears on top because fixed positioning always stacks above relative and absolute.

C Element A appears on top because it has position relative and z-10.

D Element B appears on top because it has the highest z-index value (z-20).

💡 Hint

Remember that higher z-index values stack above lower ones regardless of position type, as long as position is set.

Element B has the highest z-index value (20), so it stacks above Element A (z-10) and Element C (z-5). Positioning (relative, absolute, fixed) enables z-index to work, but the numeric value determines stacking order.

🧠 Conceptual

intermediate

How does z-index behave with nested positioned elements in Tailwind?

Given a parent div with relative z-30 and a child div inside it with absolute z-40, which element will appear on top if another sibling div has relative z-35?

A The sibling div with z-35 appears on top because parent's z-30 limits child's stacking context.

B All elements stack equally because z-index does not work across different stacking contexts.

C The parent div with z-30 appears on top because it is the ancestor of the child.

D The child div with z-40 appears on top of the sibling with z-35 because 40 > 35.

💡 Hint

Think about how stacking contexts isolate z-index values inside them.

The parent div with z-30 creates a stacking context. The child div's z-40 is relative only inside that context. The sibling div with z-35 is in a higher stacking context, so it appears above the entire parent-child group.

📝 Syntax

advanced

Which Tailwind class correctly sets z-index to 50?

Choose the correct Tailwind CSS class to apply a z-index of 50 to an element.

A z-index-50

B z-50

C z50

D z_index_50

💡 Hint

Tailwind uses a specific naming pattern for z-index utilities.

The correct Tailwind class for z-index 50 is z-50. Other options are invalid class names.

❓ optimization

advanced

How to optimize stacking order with minimal Tailwind classes?

You have three overlapping elements. You want Element X on top, Element Y in the middle, and Element Z at the bottom. Which set of Tailwind classes achieves this with the least code?

A Element X: <code>absolute z-10</code>, Element Y: <code>absolute z-20</code>, Element Z: <code>absolute z-30</code>

B Element X: <code>z-30</code>, Element Y: <code>z-20</code>, Element Z: <code>z-10</code>

C Element X: <code>relative z-30</code>, Element Y: <code>relative z-20</code>, Element Z: <code>relative z-10</code>

D Element X: <code>relative z-10</code>, Element Y: <code>relative z-20</code>, Element Z: <code>relative z-30</code>

💡 Hint

Remember z-index only works on positioned elements.

Option C correctly sets position and z-index in descending order for stacking. Option C lacks positioning, so z-index won't apply. Option C reverses stacking order. Option C stacks in reverse order because higher z-index is on bottom.

🔧 Debug

expert

Why does z-index not work on this Tailwind element?

An element has the class z-40 but it is still appearing behind other elements with lower z-index values. What is the most likely reason?

A The element does not have a position class like <code>relative</code>, <code>absolute</code>, or <code>fixed</code>.

B The z-40 class is overridden by a later CSS rule with higher specificity.

C Tailwind's z-40 class only works inside flex containers.

D The browser does not support z-index values above 30.

💡 Hint

Check if the element is positioned.

z-index only works on elements that have a position other than static (default). Without a position class like relative, absolute, or fixed, z-index has no effect.