Z-Index

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;

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.

<div class="p-8 p-r">
  <div class="bg-l-indigo-4 dim-16 dir-l-0 dir-t-0 p-a rad-1 zi-10"></div>
  <div class="bg-d-indigo-2 dim-16 dir-l-16 dir-t-16 p-a rad-1 zi-20"></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>