Tailwind CSS Z-Index Scale

Complete Tailwind z-index reference for stacking elements.
Control layer order with z-0 through z-50

Visual Stacking Demo

z-0

z-10

z-20

z-30

z-40

z-50

Higher z-index values appear on top of lower values

Z-Index Values

Positive Z-Index

z-0z-index: 0

z-10z-index: 10

z-20z-index: 20

z-30z-index: 30

z-40z-index: 40

z-50z-index: 50

z-autoz-index: auto

Negative Z-Index

-z-10z-index: -10

-z-20z-index: -20

-z-30z-index: -30

-z-40z-index: -40

-z-50z-index: -50

Common Use Cases

z-50

z-50

Modal overlays, dialogs

z-40

z-40

Dropdowns, popovers

z-30

z-30

Sticky headers, navigation

z-20

z-20

Tooltips, floating elements

z-10

z-10

Elevated content, cards

z-0

z-0

Regular content (default)

-z-10

-z-10

Background elements, decorations

Usage Examples

Modal Overlay

<div class="fixed inset-0 z-50">
  <div class="bg-black/50">
    <!-- Modal content -->
  </div>
</div>

Sticky Header

<header class="sticky top-0 z-30">
  <!-- Navigation -->
</header>

Dropdown Menu

<div class="relative">
  <button>Menu</button>
  <div class="absolute z-40">
    <!-- Dropdown items -->
  </div>
</div>

Background Decoration

<div class="relative">
  <div class="absolute -z-10">
    <!-- Background pattern -->
  </div>
  <div class="relative z-10">
    <!-- Content -->
  </div>
</div>

Understanding Stacking Context

Z-index only works on positioned elements. Make sure your element has position: relative, absolute, fixed, or sticky.

A new stacking context is created when:

Element has position: fixed or sticky
Element has opacity less than 1
Element has transform, filter, or backdrop-filter
Element is a flex/grid child with z-index other than auto
Element has isolation: isolate

For arbitrary z-index values, use bracket notation: z-[100] or z-[9999]

Position Classes for Z-Index

Remember to use one of these position utilities for z-index to take effect:

relativeposition: relative

absoluteposition: absolute

fixedposition: fixed

stickyposition: sticky

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect z-index, positioning, layout, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →