0
# Z-Index Utilities
1

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

4
## Capabilities
5

6
### Z-Index Values
7

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

10
```scss { .api }
11
.z-auto { z-index: auto; }
12
.z-0 { z-index: 0; }
13
.z-1 { z-index: 1; }
14
.z-2 { z-index: 2; }
15
.z-3 { z-index: 3; }
16
.z-4 { z-index: 4; }
17
.z-5 { z-index: 5; }
18
```
19

20
## Usage Examples
21

22
```html
23
<!-- Modal overlay with high z-index -->
24
<div class="fixed top-0 left-0 w-full h-full bg-black-alpha-50 z-4">
25
  <div class="bg-white p-4 border-round z-5">
26
    Modal content appears above overlay
27
  </div>
28
</div>
29

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

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

40
<!-- Default stacking context -->
41
<div class="relative z-0">
42
  Base content layer
43
</div>
44
```
45

46
## Usage Guidelines
47

48
**Z-Index Hierarchy:**
49
- `z-5`: Highest priority elements (modals, dropdowns)
50
- `z-4`: Overlays and backdrops  
51
- `z-3`: Fixed navigation and headers
52
- `z-2`: Tooltips and popups
53
- `z-1`: Minor elevated content
54
- `z-0`: Default stacking context
55
- `z-auto`: Browser default stacking
56

57
**Best Practices:**
58
- Use the lowest z-index value that achieves the desired layering
59
- Reserve higher values (z-4, z-5) for truly important overlays
60
- Apply z-index utilities only to positioned elements (relative, absolute, fixed, sticky)
61

62
## Responsive Variants
63

64
All z-index utilities support responsive variants:
65

66
- `sm:z-3` - Apply z-index on small screens and up
67
- `md:z-4` - Apply z-index on medium screens and up
68
- `lg:z-2` - Apply z-index on large screens and up
69
- `xl:z-1` - Apply z-index on extra large screens and up