Open In App

Tailwind CSS Z-index

Improve
Improve
Like Article
Like
Save
Share
Report

The tailwind CSS is a utility CSS framework that provides classes the manage our HTML content in the use of CSS. The tailwind CSS makes our designing part easier and responsive for multiple platforms. The z-Index utility is for controlling the stack order of an element. It is the alternative to the CSS z-index property. This class is used to describe the z-index along the three-dimensional plane, as given in the below examples.

Tailwind CSS z-index classes:

  • z-0
  • z-10
  • z-20
  • z-30
  • z-40
  • z-50
  • z-auto

Note: In the above class, z-0 is equivalent to z-index:0 CSS property and so on.

z-0: It is used to give the z-index 0 to the element. 

Syntax:

<element class="z-0">....</element>

Example:

HTML




<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full 
                    h-12 bg-green-400" 
              style="top: 32px;">0</div>
        <div class="relative z-10 w-full 
                    h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full 
                    h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full 
                    h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full 
                    h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full 
                    h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>


Output: 

 z-10: It is used to give the z-index 10 to the element. The elements appear 10px upside along the z-axis.

Syntax:

<element class="z-10">....</element>

Example:

HTML




<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full 
                    h-12 bg-yellow-400" style="top: 32px;">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>


Output: 

z-20: It is used to give the z-index 20 to the element. The elements appear 20px upside along the z-axis.

Syntax:

<element class="z-20">....</element>

Example:

HTML




<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400"
                                           style="top: 32px;">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>


Output:

z-30: It is used to give the z-index 30 to the element. The elements appear 30px upside along the z-axis.

Syntax:

<element class="z-30">....</element>

Example:

HTML




<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 
                           bg-blue-400" style="top: 32px;">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>


Output:

 z-40: It is used to give the z-index 40 to the element. The elements appear 40px upside along the z-axis.

Syntax:

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

Example:

HTML




<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300" 
                                         style="top: 32px;">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400">5</div>
    </div>
</body>
  
</html>


Output:

 z-50: It is used to give the z-index 50 to the element. The elements appear 50px upside along the z-axis.

Syntax:

<element class="z-50">....</element>

Example:

HTML




<!DOCTYPE html>
<head>
    <link 
    rel="stylesheet"
    href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Z-Index Class</b>
    <div class="flex-column">
        <div class="relative z-0 w-full h-12 bg-green-400">0</div>
        <div class="relative z-10 w-full h-12 bg-yellow-400">1</div>
        <div class="relative z-20 w-full h-12 bg-red-400">2</div>
        <div class="relative z-30 w-full h-12 bg-blue-400">3</div>
        <div class="relative z-40 w-full h-12 bg-green-300">4</div>
        <div class="relative z-50 w-full h-12 bg-orange-400" 
                                          style="top: 32px;">5</div>
    </div>
</body>
  
</html>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads