- Layout
- z-index
Layout
z-index
Set the stacking order of relative or absolute positioned elements.
| Class | Styles |
|---|---|
z-<number> | z-index: <number>; |
-z-<number> | z-index: calc(<number> * -1); |
z-auto | z-index: auto; |
Basic usage
Setting the z-index
Use the z-* utilities to control the stack order (or three-dimensional positioning) of an element, regardless of order it has been displayed.
05
04
03
02
01
<!-- index.html --><div class="**z-40** ...">05</div><div class="**z-30** ...">04</div><div class="**z-20** ...">03</div><div class="**z-10** ...">02</div><div class="**z-0** ...">01</div>Using negative values
To use a negative z-index value, prefix the class name with a dash to convert it to a negative value.
Using custom values
Customizing your theme
By default, Tailwind provides six numeric z-index utilities and an auto utility. You can customize these values by editing theme.zIndex or theme.extend.zIndex in your tailwind.config.js file.
module.exports = { theme: { extend: { zIndex: { 100: "100", }, }, },};Learn more about customizing the default theme in the theme customization documentation.
