Layout
Z-Index
Utilities for controlling the stack order of an element.
Basic usage
Setting the z-index
Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the z-{index} utilities.
05
04
03
02
01
<div className="**z-40** ...">05</div>
<div className="**z-30** ...">04</div>
<div className="**z-20** ...">03</div>
<div className="**z-10** ...">02</div>
<div className="**z-0** ...">01</div>
Using negative values
To use a negative z-index value, prefix the className name with a dash to convert it to a negative value.
<div className="**-z-50**">
<!-- ... -->
</div>