Z-Index
Controls the element's stack order.
Utility | 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; |
This example showcases various z-index utilities:
- The zi-10 utility sets the z-index to 10, positioning the element above elements with a lower z-index value.
- The zi-20 utility sets the z-index to 20, positioning the element even higher in the stacking context.
A
B
<div class="p-r"> <div class="ai-c bg-indigo d-30 d-f jc-c p-r rad-1 zi-10"> <p class="tc-white">A</p> </div> <div class="ai-c bg-indigo-8 d-15 d-f jc-c l-0 p-a rad-1 t-0 zi-20"> <p class="tc-white">B</p> </div></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Media modifiers
You can combine 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>
Hover modifiers
Alternatively, you can apply :hover
by using h:zi-*
utility to override elements and change their values when hovering over them.
<div class="zi-10 h:zi-20 ..."></div>