Z-Index Utilities z-*

Control the stack order of elements with z-index utilities to manage layering and overlapping content.

Z-Index Classes

Click on any z-index class below to learn about its specific use cases, stacking behavior, and implementation examples.

z-0
Base layer
z-index: 0
Learn More →
z-10
Low priority
z-index: 10
Learn More →
z-20
Medium priority
z-index: 20
Learn More →
z-30
High priority
z-index: 30
Learn More →
z-40
Higher priority
z-index: 40
Learn More →
z-50
Highest priority
z-index: 50
Learn More →
z-auto
Auto stacking
z-index: auto
Learn More →

Z-Index Overview

How Z-Index Works

  • • Higher z-index values appear on top
  • • Only works on positioned elements
  • • Creates stacking contexts
  • • Children can't escape parent context
  • • Use increments of 10 for flexibility

Common Use Cases

  • • Modal dialogs and overlays
  • • Dropdown menus and tooltips
  • • Fixed headers and navigation
  • • Notification systems
  • • Background decorative elements