tailwind CSS là một framework CSS cung cấp các class quản lý nội dung HTML. tailwind CSS giúp việc thiết kế dễ dàng hơn và responsive trên nhiều nền tảng.
Tiện ích z-Index dùng để kiểm soát thứ tự xếp chồng của một phần tử. Nó là một giải pháp thay thế cho thuộc tính CSS z-index. Class này mô tả z-index dọc theo mặt phẳng ba chiều như ví dụ bên dưới.
Các class z-index của Tailwind CSS:
- z-0
- z-10
- z-20
- z-30
- z-40
- z-50
- z-auto
Lưu ý: Trong các class trên, z-0 tương đương với thuộc tính CSS z-index:0 và cứ tiếp tục như vậy.
z-0: Nó được sử dụng để gán z-index bằng 0 cho phần tử.
Cú pháp:
<element class="z-0">....</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Kết quả:
z-10: Nó được sử dụng để gán z-index bằng 10 cho phần tử. Các phần tử xuất hiện cao hơn 10px dọc theo trục z.
Cú pháp:
<element class="z-10">....</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Kết quả:
z-20: Nó được sử dụng để gán z-index bằng 20 cho phần tử. Các phần tử xuất hiện cao hơn 20px dọc theo trục z.
Cú pháp:
<element class="z-20">....</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Kết quả:
z-30: Nó được sử dụng để gán z-index bằng 30 cho phần tử. Các phần tử xuất hiện cao hơn 30px dọc theo trục z.
Cú pháp:
<element class="z-30">....</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Kết quả:
z-40: Nó được sử dụng để gán z-index bằng 40 cho phần tử. Các phần tử xuất hiện cao hơn 40px dọc theo trục z.
Cú pháp:
<element class="z-40">....</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Kết quả:
z-50: Nó được sử dụng để gán z-index bằng 50 cho phần tử. Các phần tử xuất hiện cao hơn 50px dọc theo trục z.
Cú pháp:
<element class="z-50">....</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Kết quả:
