Learn the Front-end Beta Search

z-index

Draft

Definition

The z-index CSS property controls the stacking order of positioned elements. It determines which elements appear in front of others when they overlap. Elements with higher z-index values are stacked on top of elements with lower values. The z-index property only works on positioned elements (relative, absolute, fixed, or sticky).

Syntax

z-index: <value>;

Values

Integer Values

Positive and negative integers:

.element {
  z-index: 1; /* Above default stacking */
  z-index: 10; /* Higher layer */
  z-index: 100; /* Very high layer */
  z-index: -1; /* Below default stacking */
  z-index: auto; /* Default stacking order */
}

Keywords

Predefined values:

.element {
  z-index: auto; /* Default stacking order */
  z-index: inherit; /* Inherits from parent */
  z-index: initial; /* Sets to default value */
  z-index: unset; /* Resets to inherited or initial */
}

Examples

Basic Z-Index Layering

HTML

Basic Z-Index Layering:

z-10
z-20
z-30
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Basic Z-Index Layering:</h3>

  <div class="relative h-32 bg-gray-200 rounded">
    <div class="absolute top-4 left-4 w-16 h-16 bg-blue-500 rounded z-10">
      <span class="text-white text-xs">z-10</span>
    </div>
    <div class="absolute top-8 left-8 w-16 h-16 bg-green-500 rounded z-20">
      <span class="text-white text-xs">z-20</span>
    </div>
    <div class="absolute top-12 left-12 w-16 h-16 bg-purple-500 rounded z-30">
      <span class="text-white text-xs">z-30</span>
    </div>
  </div>
</div>

Z-Index with Different Positioning

HTML

Z-Index with Different Positioning:

z-10
z-20
z-30
z-30
z-20
z-10
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Z-Index with Different Positioning:</h3>

  <div class="space-y-4">
    <div class="relative h-24 bg-gray-200 rounded">
      <div class="absolute top-2 left-2 w-12 h-12 bg-red-500 rounded z-10">
        <span class="text-white text-xs">z-10</span>
      </div>
      <div class="relative top-4 left-4 w-12 h-12 bg-blue-500 rounded z-20">
        <span class="text-white text-xs">z-20</span>
      </div>
      <div class="absolute top-6 left-6 w-12 h-12 bg-green-500 rounded z-30">
        <span class="text-white text-xs">z-30</span>
      </div>
    </div>

    <div class="relative h-24 bg-gray-200 rounded">
      <div class="absolute top-2 left-2 w-12 h-12 bg-yellow-500 rounded z-30">
        <span class="text-white text-xs">z-30</span>
      </div>
      <div class="absolute top-4 left-4 w-12 h-12 bg-orange-500 rounded z-20">
        <span class="text-white text-xs">z-20</span>
      </div>
      <div class="absolute top-6 left-6 w-12 h-12 bg-pink-500 rounded z-10">
        <span class="text-white text-xs">z-10</span>
      </div>
    </div>

  </div>
</div>

Z-Index in Modals and Overlays

HTML

Z-Index in Modals and Overlays:

Background Content

This is the main content behind the modal

Modal Title

This modal appears above the backdrop

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Z-Index in Modals and Overlays:</h3>

  <div class="relative h-40 bg-gray-200 rounded">
    <!-- Background content -->
    <div class="absolute inset-0 bg-blue-100 rounded">
      <div class="p-4">
        <h4 class="font-semibold">Background Content</h4>
        <p class="text-sm text-gray-600">This is the main content behind the modal</p>
      </div>
    </div>

    <!-- Modal backdrop -->
    <div class="absolute inset-0 bg-black bg-opacity-50 rounded z-10"></div>

    <!-- Modal content -->
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-32 bg-white rounded shadow-lg z-20">
      <div class="p-4">
        <h4 class="font-semibold">Modal Title</h4>
        <p class="text-sm text-gray-600">This modal appears above the backdrop</p>
      </div>
    </div>

  </div>
</div>

Z-Index for Navigation

HTML

Z-Index for Navigation:

Main Content

This content is behind the navigation

Navigation
Option 1
Option 2
Option 3
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Z-Index for Navigation:</h3>

  <div class="relative h-32 bg-gray-200 rounded">
    <!-- Main content -->
    <div class="absolute inset-0 bg-blue-100 rounded">
      <div class="p-4">
        <h4 class="font-semibold">Main Content</h4>
        <p class="text-sm text-gray-600">This content is behind the navigation</p>
      </div>
    </div>

    <!-- Navigation bar -->
    <div class="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-300 rounded-t z-30">
      <div class="flex items-center justify-between h-full px-4">
        <span class="font-semibold">Navigation</span>
        <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded">Menu</button>
      </div>
    </div>

    <!-- Dropdown menu -->
    <div class="absolute top-12 right-4 w-32 bg-white border border-gray-300 rounded shadow-lg z-40">
      <div class="p-2">
        <div class="px-3 py-1 text-sm hover:bg-gray-100 rounded">Option 1</div>
        <div class="px-3 py-1 text-sm hover:bg-gray-100 rounded">Option 2</div>
        <div class="px-3 py-1 text-sm hover:bg-gray-100 rounded">Option 3</div>
      </div>
    </div>

  </div>
</div>

Z-Index for Tooltips

HTML

Z-Index for Tooltips:

This is a tooltip
Tooltip below
Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Z-Index for Tooltips:</h3>

  <div class="space-y-4">
    <div class="relative inline-block">
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        Hover for tooltip
      </button>
      <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-xs rounded z-50">
        This is a tooltip
      </div>
    </div>

    <div class="relative inline-block">
      <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
        Another tooltip
      </button>
      <div class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-xs rounded z-50">
        Tooltip below
      </div>
    </div>

  </div>
</div>

Z-Index Best Practices

HTML

Z-Index Best Practices:

Good Z-Index Usage:

✓ Use consistent z-index values throughout your app

✓ Create a z-index scale (e.g., 10, 20, 30, 40)

✓ Use negative values sparingly

✓ Document your z-index system

Common Z-Index Values:

• Dropdowns: 1000-1099

• Sticky elements: 1100-1199

• Fixed headers: 1200-1299

• Modals: 1300-1399

• Popovers: 1400-1499

• Tooltips: 1500-1599

Common Mistakes to Avoid:

✗ Using extremely high z-index values (9999)

✗ Not considering stacking contexts

✗ Inconsistent z-index values

✗ Not documenting z-index usage

Code
<div class="p-6 bg-gray-100 border rounded">
  <h3 class="mb-4 font-semibold">Z-Index Best Practices:</h3>

  <div class="space-y-6">
    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-lg font-semibold">Good Z-Index Usage:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ Use consistent z-index values throughout your app</p>
        <p class="text-base text-gray-700">✓ Create a z-index scale (e.g., 10, 20, 30, 40)</p>
        <p class="text-base text-gray-700">✓ Use negative values sparingly</p>
        <p class="text-base text-gray-700">✓ Document your z-index system</p>
      </div>
    </div>

    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-lg font-semibold">Common Z-Index Values:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">• Dropdowns: 1000-1099</p>
        <p class="text-base text-gray-700">• Sticky elements: 1100-1199</p>
        <p class="text-base text-gray-700">• Fixed headers: 1200-1299</p>
        <p class="text-base text-gray-700">• Modals: 1300-1399</p>
        <p class="text-base text-gray-700">• Popovers: 1400-1499</p>
        <p class="text-base text-gray-700">• Tooltips: 1500-1599</p>
      </div>
    </div>

    <div class="p-4 bg-white border rounded">
      <h4 class="mb-3 text-lg font-semibold">Common Mistakes to Avoid:</h4>
      <div class="space-y-2">
        <p class="text-base text-red-600">✗ Using extremely high z-index values (9999)</p>
        <p class="text-base text-red-600">✗ Not considering stacking contexts</p>
        <p class="text-base text-red-600">✗ Inconsistent z-index values</p>
        <p class="text-base text-red-600">✗ Not documenting z-index usage</p>
      </div>
    </div>

  </div>
</div>

Browser Support

The z-index property has excellent browser support:

  • All browsers: Full support for basic z-index values
  • Modern browsers: Full support for all values and stacking contexts
  • Internet Explorer: Full support (IE4+)

Best Practices

  1. Consistency: Use a consistent z-index scale throughout your application
  2. Documentation: Document your z-index system for team consistency
  3. Stacking contexts: Understand how stacking contexts affect z-index
  4. Positioning: Remember that z-index only works on positioned elements
  5. Values: Use reasonable z-index values (avoid extremely high numbers)
  6. Testing: Test z-index behavior across different browsers and devices

Common Use Cases

  • Modals and overlays: Creating layered interface elements
  • Navigation: Ensuring navigation elements appear above content
  • Tooltips: Making tooltips appear above other elements
  • Dropdowns: Ensuring dropdown menus appear above other content
  • Sticky elements: Controlling the layering of sticky positioned elements
  • Cards and components: Creating layered card designs
  • Animations: Controlling element layering during animations
  • position: Required for z-index to work (relative, absolute, fixed, sticky)
  • display: Can create new stacking contexts
  • opacity: Can create new stacking contexts
  • transform: Can create new stacking contexts
  • filter: Can create new stacking contexts
  • isolation: Controls stacking context creation
  • contain: Can affect stacking context behavior