Tailwind CSS - Z-Index

Previous
Next

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 <div> element based on a higher Z Index.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Z Index 
    </h2>
    <div class="relative ">
        <div class="bg-lime-600 h-48 w-48 z-10 
                       absolute top-0 left-0"></div>
        <div class="bg-lime-500 h-44 w-44 z-30 
                       absolute top-10 left-12"></div>
        <div class="bg-lime-400 h-40 w-40 z-40 
                       absolute top-20 left-24"></div>
        <div class="bg-lime-300 h-36 w-36 z-50 
                       absolute top-28 left-36"></div>
    </div>
</body>

</html>

Controlling Stack Using Negative z-index

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

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Z Index 
    </h2>
    <div class="relative ">
        <div class="bg-lime-600 h-48 w-48 -z-10 
                       absolute top-0 left-0"></div>
        <div class="bg-lime-500 h-44 w-44 -z-30 
                       absolute top-10 left-12"></div>
        <div class="bg-lime-400 h-40 w-40 -z-40 
                       absolute top-20 left-24"></div>
        <div class="bg-lime-300 h-36 w-36 -z-50 
                       absolute top-28 left-36"></div>
    </div>
</body>

</html>
Print Page
Previous
Next