Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Z-Index

Tailwind CSS Z Index is a utility class that provides measures to control the stacking order of elements. The element with a higher z index will be on top of the element with a lower z index.

Tailwind CSS Z Index Classes

The following is the list of Tailwind CSS Z Index classes which are utilities for controlling element's stacking order.

Class	CSS Properties
z-0	z-index: 0;
z-10	z-index: 10;
z-20	z-index: 20;
z-30	z-index: 30;
z-40	z-index: 40;
z-50	z-index: 50;
z-auto	z-index: auto;

Functionality of Tailwind CSS Z Index Classes

Z-*: Class is used to display elements according to their stack order along the three-dimensional plane. {*} here specifying the order value range from 0-50, which is skip counting by 10.
Z-Auto: This class replaces the CSS Z-index: auto; property, which specifies the default behavior of the element, eliminating the need to create a new stacking context.

Tailwind CSS Z-Index Class Examples

The following examples will illustrate the Tailwind CSS Z index class utility.

Setting z-index To Control Stack

The below example illustrates the alignment of a normal

element based on a higher Z Index.

Example




    



    
        Tailwind CSS Z Index

Controlling Stack Using Negative z-index

The below example illustrates the use of negative Z Index on the elements.

Example




    



    
        Tailwind CSS Z Index

Print Page