Bird
Raised Fist0
Tailwindmarkup~5 mins

Z-index stacking control in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Z-index helps decide which item appears on top when things overlap. It controls the stack order.

When you want a popup to appear above other page content.
When dropdown menus should show over other elements.
When tooltips need to be visible on top of images or text.
When layering multiple images or cards and controlling which is front.
When fixing headers or footers that should stay above scrolling content.
Syntax
Tailwind
class="z-{value}"

// where {value} is a number like 0, 10, 20, 30, 40, 50

Higher numbers appear on top of lower numbers.

Tailwind provides default z-index values like z-0, z-10, z-20, etc.

Examples
Content B will appear above Content A because 20 > 10.
Tailwind
<div class="z-10">Content A</div>
<div class="z-20">Content B</div>
Popup will be on top of Background because 50 > 0.
Tailwind
<div class="z-0">Background</div>
<div class="z-50">Popup</div>
Both have same z-index, so order in HTML decides stacking.
Tailwind
<div class="z-10">Layer 1</div>
<div class="z-10">Layer 2</div>
Sample Program

This example shows three overlapping colored boxes. Box 2 with z-20 appears on top, Box 1 with z-10 is below it, and Box 3 with z-0 is at the bottom.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Z-index Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="relative h-64">
  <div class="absolute top-10 left-10 w-32 h-32 bg-blue-500 z-10 text-white flex items-center justify-center">
    Box 1 (z-10)
  </div>
  <div class="absolute top-20 left-20 w-32 h-32 bg-red-500 z-20 text-white flex items-center justify-center">
    Box 2 (z-20)
  </div>
  <div class="absolute top-32 left-32 w-32 h-32 bg-green-500 z-0 text-white flex items-center justify-center">
    Box 3 (z-0)
  </div>
</body>
</html>
OutputSuccess
Important Notes

Z-index only works on positioned elements (relative, absolute, fixed, sticky).

Time complexity is not applicable as this is a styling property.

Common mistake: forgetting to set position, so z-index has no effect.

Use z-index to control layering instead of changing HTML order when possible.

Summary

Z-index controls which element appears on top when overlapping.

Higher z-index values stack above lower ones.

Works only on elements with position set (relative, absolute, fixed, sticky).

Practice

(1/5)
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