⌘ K
esc

    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-5
    z-4
    z-3
    z-2
    z-1
    z-0
    
    <div class="card">
        <div class="card-container blue-container 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-blue-500 font-bold text-white 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-blue-500 font-bold text-white 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-blue-500 font-bold text-white 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-blue-500 font-bold text-white 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-blue-500 font-bold text-white 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-blue-500 font-bold text-white border-round shadow-1" style="width: 100px; height: 100px; top:50px">z-0</div>
        </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">
        <div class="card-container yellow-container 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-yellow-500 font-bold text-gray-900 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-yellow-500 font-bold text-gray-900 border-round shadow-1" style="width: 100px; height: 100px; top:10px">2</div>
        </div>
    </div>