Tailwind CSS Z-index - GeeksforGeeks

23 Mar, 2022
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:
Picked
Tailwind CSS
Tailwind-Layout
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?