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.

Practice

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

easy

A. The size of an element

B. Which element appears on top when elements overlap

C. The color of an element

D. The font style of text

Solution

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

   The z-index property controls stacking order of overlapping elements.

2. Step 2: Identify what z-index affects

   It determines which element appears on top visually when elements overlap.

3. Final Answer:

   Which element appears on top when elements overlap -> Option B

4. Quick Check:

   z-index controls stacking order = B [OK]

Hint: z-index means who is on top visually [OK]

Common Mistakes:

• Confusing z-index with size or color
• Thinking z-index changes element size
• Ignoring stacking order concept

2. Which Tailwind class correctly sets an element's z-index to 10?

easy

A. z-10

B. z-index-10

C. z10

D. index-z-10

Solution

1. Step 1: Recall Tailwind z-index syntax

   Tailwind uses z- prefix followed by the number to set z-index.

2. Step 2: Match correct class

   The correct class for z-index 10 is z-10.

3. Final Answer:

   z-10 -> Option A

4. Quick Check:

   Tailwind z-index class = A [OK]

Hint: Tailwind z-index classes start with 'z-' [OK]

Common Mistakes:

• Using 'z-index-10' which is invalid
• Missing dash between z and number
• Reversing order like 'index-z-10'

3. Given two overlapping divs with classes relative z-20 and relative z-10, which div appears on top?

medium

A. The div with z-20

B. They overlap with no order

C. They appear side by side

D. The div with z-10

Solution

1. Step 1: Understand z-index values

   Higher z-index values stack above lower ones.

2. Step 2: Compare given z-index values

   z-20 is higher than z-10, so it appears on top.

3. Final Answer:

   The div with z-20 -> Option A

4. Quick Check:

   Higher z-index on top = D [OK]

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

Common Mistakes:

• Assuming lower number is on top
• Ignoring position requirement
• Thinking they don't overlap

4. Why does the z-50 class not bring an element on top if it has no positioning class like relative or absolute?

medium

A. Because the element is hidden

B. Because z-50 is not a valid Tailwind class

C. Because z-index only works on positioned elements

D. Because z-index only works on text elements

Solution

1. Step 1: Recall z-index requirements

   z-index only affects elements with position set (relative, absolute, fixed, sticky).

2. Step 2: Analyze missing positioning

   Without positioning, z-index has no effect, so z-50 won't change stacking.

3. Final Answer:

   Because z-index only works on positioned elements -> Option C

4. Quick Check:

   Position required for z-index = A [OK]

Hint: z-index needs position set to work [OK]

Common Mistakes:

• Thinking z-50 is invalid
• Assuming z-index works without position
• Confusing visibility with stacking

5. You have three overlapping elements with classes absolute z-30, relative z-40, and fixed z-20. Which element will appear on top and why?

hard

A. The element with fixed z-20 because fixed position overrides z-index

B. The element with absolute z-30 because absolute is always on top

C. All elements appear at the same level because positions differ

D. The element with relative z-40 because it has the highest z-index

Solution

1. Step 1: Understand z-index and position interaction

   z-index controls stacking order only among positioned elements; all three are positioned.

2. Step 2: Compare z-index values

   The element with z-40 has the highest z-index, so it appears on top regardless of position type.

3. Final Answer:

   The element with relative z-40 because it has the highest z-index -> Option D

4. Quick Check:

   Highest z-index on positioned elements = C [OK]

Hint: Highest z-index wins if position is set [OK]

Common Mistakes:

• Thinking fixed is always on top
• Ignoring z-index values
• Assuming position type alone controls stacking