Z-Index

Controls the stacking order of positioned elements (those with a position value other than static). Higher z-index values appear on top of elements with lower values. This is vital for creating layered interfaces like modals, tooltips, and sticky headers. In Tailwind v4, z-index utilities have better integration with stacking contexts created by modern CSS properties.

Layout1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="relative h-32 w-full">
  <div class="absolute inset-0 bg-blue-200 z-0">Background layer (z-0)</div>
  <div class="absolute inset-y-0 left-1/4 right-1/4 bg-blue-400 z-10">Middle layer (z-10)</div>
  <div class="absolute inset-y-0 left-1/3 right-1/3 flex items-center justify-center bg-blue-600 text-white z-20">Top layer (z-20)</div>
</div>

Examples

Basic z-index stacking of three overlapping elements

<div class="relative h-32 w-full">
  <div class="absolute inset-0 bg-blue-200 z-0">Background layer (z-0)</div>
  <div class="absolute inset-y-0 left-1/4 right-1/4 bg-blue-400 z-10">Middle layer (z-10)</div>
  <div class="absolute inset-y-0 left-1/3 right-1/3 flex items-center justify-center bg-blue-600 text-white z-20">Top layer (z-20)</div>
</div>

Edit in playground

Dropdown menu that uses z-index to appear above other content

<!-- Dropdown menu with proper stacking -->
<div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none">Options</button>
  </div>
  <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
    <div class="py-1" role="menu" aria-orientation="vertical">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

Edit in playground

Complex UI demonstrating z-index layering with header, tooltip, and modal

<!-- Complex UI with multiple stacking layers -->
<div class="relative min-h-screen bg-gray-100 p-4">
  <!-- Fixed header with shadow (high z-index) -->
  <header class="fixed top-0 inset-x-0 bg-white shadow-md z-40 px-4 py-3">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
      <div class="font-bold text-lg">Site Title</div>
      <nav class="space-x-4">
        <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">About</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Contact</a>
      </nav>
    </div>
  </header>

  <!-- Main content (goes beneath header) -->
  <main class="pt-16 max-w-7xl mx-auto">
    <div class="relative bg-white rounded-lg shadow-md p-6 my-4">
      <h2 class="text-xl font-bold mb-4">Content with Tooltip</h2>
      <p>This paragraph has a 
        <span class="relative inline-block">
          tooltip
          <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-1 bg-gray-900 text-white text-xs px-2 py-1 rounded z-10">I'm a tooltip with z-10</span>
        </span>
        that appears above it with a higher z-index.
      </p>
    </div>
  </main>

  <!-- Modal (highest z-index) -->
  <div class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
    <div class="bg-white rounded-lg max-w-md w-full p-6">
      <h3 class="text-lg font-medium mb-4">Modal Dialog</h3>
      <p class="mb-4">This modal has the highest z-index (z-50) to appear above all other content.</p>
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Close</button>
    </div>
  </div>
</div>

Edit in playground

Demonstrating how stacking contexts affect z-index behavior

<!-- Important note on stacking contexts -->
<div class="relative transform" style="transform: translateZ(0);">
  <!-- This creates a stacking context -->
  <div class="relative bg-white p-4 border rounded z-10">I have z-10</div>
  
  <!-- This is outside the stacking context -->
  <div class="absolute inset-0 m-8 bg-blue-200 z-20">I have z-20 but appear BEHIND the z-10 element because it's in a different stacking context</div>
</div>

<p class="text-sm text-gray-500 mt-4">NOTE: z-index only works between elements within the same stacking context. Many CSS properties create new stacking contexts (transform, opacity < 1, filter, etc.)</p>

Edit in playground

Live Preview

Try the Z-Index utility with different values

Open Interactive Playground

Variants

Numeric values represent the stacking level, with higher numbers appearing on top. z-auto defers to the browser's default stacking algorithm. Negative values place elements behind their siblings with auto z-index.

01020304050auto-10-20-30-40-50