Z-Index Utilities

Z-index utilities control the stacking order of elements. These utilities are essential for managing layering in complex layouts with overlapping content.

Capabilities

Z-Index Values

Control the stack order of elements using predefined z-index values.

.z-auto { z-index: auto; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }

Usage Examples

<!-- Modal overlay with high z-index -->
<div class="fixed top-0 left-0 w-full h-full bg-black-alpha-50 z-4">
  <div class="bg-white p-4 border-round z-5">
    Modal content appears above overlay
  </div>
</div>

<!-- Navigation header -->
<header class="fixed top-0 w-full bg-white border-bottom-1 z-3">
  Navigation content
</header>

<!-- Tooltip positioned above other content -->
<div class="absolute bg-gray-900 text-white p-2 border-round z-2">
  Tooltip text
</div>

<!-- Default stacking context -->
<div class="relative z-0">
  Base content layer
</div>

Usage Guidelines

Z-Index Hierarchy:

• z-5: Highest priority elements (modals, dropdowns)
• z-4: Overlays and backdrops
• z-3: Fixed navigation and headers
• z-2: Tooltips and popups
• z-1: Minor elevated content
• z-0: Default stacking context
• z-auto: Browser default stacking

Best Practices:

• Use the lowest z-index value that achieves the desired layering
• Reserve higher values (z-4, z-5) for truly important overlays
• Apply z-index utilities only to positioned elements (relative, absolute, fixed, sticky)

Responsive Variants

All z-index utilities support responsive variants:

• sm:z-3 - Apply z-index on small screens and up
• md:z-4 - Apply z-index on medium screens and up
• lg:z-2 - Apply z-index on large screens and up
• xl:z-1 - Apply z-index on extra large screens and up