Defines the stack order of an element.
| 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; |
<div class="flex flex-wrap justify-content-center" style="min-height: 200px">
<div class="z-5 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:125px">z-5</div>
<div class="z-4 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:100px; top:10px">z-4</div>
<div class="z-3 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:75px; top:20px">z-3</div>
<div class="z-2 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:50px; top:30px">z-2</div>
<div class="z-1 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:25px; top:40px">z-1</div>
<div class="z-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; top:50px">z-0</div>
</div>
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.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex flex-wrap justify-content-center" style="min-height: 200px">
<div class="z-1 md:z-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; left:25px">1</div>
<div class="z-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1" style="width: 100px; height: 100px; top:10px">2</div>
</div>