Z-Index
Controls the element’s stack order.
| Class | Properties |
|---|---|
| zi-0 | z-index: 0; |
| zi-10 | z-index: 10; |
| zi-20 | z-index: 20; |
| zi-30 | z-index: 30; |
| zi-40 | z-index: 40; |
| zi-50 | z-index: 50; |
| zi-60 | z-index: 60; |
| zi-70 | z-index: 70; |
| zi-80 | z-index: 80; |
| zi-90 | z-index: 90; |
| zi-auto | z-index: auto; |
Using breakpoints
Using responsive breakpoints like sm:zi-*, md:zi-*, lg:zi-*, and xxl:zi-* allows targeting specific utilities in different viewports.
<div class="zi-10 md:zi-20 ..."></div>Using variants
Using :hover variants such as h:zi-* allows you to override elements and change their values when hovering over them.
<div class="zi-10 h:zi-20 ..."></div>