Z-index

Tailwind CSS Z-index

Use responsive z-index utilities to control the stack order. A simple way to put elements on top of others.

Basic example

To place elements on top of others, use the .z-{value} class.

z-40

z-30

z-20

z-10

z-0

HTML

        
            
        <div class="... z-40">z-40</div>
        <div class="... z-30">z-30</div>
        <div class="... z-20">z-20</div>
        <div class="... z-10">z-10</div>
        <div class="... z-0">z-0</div>

To use a negative z-index value, prefix the class name with a dash to convert it to a negative value.

HTML

        
            
        <div class="... -z-40">-z-40</div>

Z-index

Tailwind CSS Z-index

Basic example

Related resources