Z-index stacking control in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a z-index of 10 using Tailwind CSS.

Tailwind

<div class="relative [1]">Content</div>

Drag options to blanks, or click blank then click option'

Az-10

Bz-20

Cz-0

Dz-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using z-20 which sets z-index to 20, not 10.

Using z-auto which resets z-index to default.

The class z-10 sets the z-index to 10, controlling stacking order.

2fill in blank

medium

Complete the code to set the z-index to the highest predefined Tailwind value.

Tailwind

<div class="absolute [1]">Top Layer</div>

Drag options to blanks, or click blank then click option'

Az-30

Bz-40

Cz-50

Dz-20

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing z-40 or lower which are not the highest.

Using z-auto which does not set a numeric z-index.

z-50 is the highest default z-index value in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply a z-index of 5 using Tailwind CSS.

Tailwind

<div class="relative [1]">Layer</div>

Drag options to blanks, or click blank then click option'

Az-5

Bz-10

Cz-0

Dz-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using z-5 which is not a valid Tailwind class.

Using z-auto which resets z-index.

Tailwind does not have a z-5 class by default. Use z-10 for a low z-index.

4fill in blank

hard

Fill both blanks to set a fixed position and a z-index of 40.

Tailwind

<div class="[1] [2]">Fixed Layer</div>

Drag options to blanks, or click blank then click option'

Afixed

Babsolute

Cz-40

Dz-10

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute instead of fixed for position.

Using z-10 which is lower than 40.

fixed sets the position fixed, and z-40 sets the z-index to 40.

5fill in blank

hard

Fill all three blanks to create a sticky header with z-index 30 and relative positioning.

Tailwind

<header class="[1] [2] [3]">Header Content</header>

Drag options to blanks, or click blank then click option'

Asticky

Bz-30

Crelative

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed instead of sticky.

Omitting the z-index class or using a wrong value.

sticky makes the header stick on scroll, z-30 sets the stacking order, and relative sets positioning context.

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