Tailwind CSS Z-index
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"</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"</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"</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"</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"</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"</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:
Please Login to comment...