Z-Index

Defines the stack order of an element.

Classes
Class Properties
z-auto z-index: auto;
z-0 z-index: 0;
z-1 z-index: 1;
z-2 z-index: 2;
z-3 z-index: 3;
z-4 z-index: 4;
z-5 z-index: 5;
Examples
z-auto
z-5
z-4
z-3
z-2
z-1
z-0

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="z-auto relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:150px">z-auto</div>
    <div class="z-5 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:125px">z-5</div>
    <div class="z-4 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:100px">z-4</div>
    <div class="z-3 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:75px">z-3</div>
    <div class="z-2 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:50px">z-2</div>
    <div class="z-1 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:25px">z-1</div>
    <div class="z-0 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px;">z-0</div>
</div>

Responsive

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:z-1 to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens e.g monitors
1
2

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="z-1 md:z-0 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px; left:25px">1</div>
    <div class="z-0 relative flex align-items-center justify-content-center shadow-1 p-3 surface-50 font-bold text-blue-500" style="width: 100px; height: 100px;">2</div>
</div>