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.