Skip to content

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>