Tailwind CSS - Z-Index
Tailwind CSS Z Index 是一个实用类，用于控制元素的堆叠顺序。z 索引值较高的元素将位于 z 索引值较低的元素之上。
Tailwind CSS Z Index 类
以下是用于控制元素堆叠顺序的 Tailwind CSS Z Index 类的列表。
| 类 | CSS 属性 |
|---|---|
| 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; |
Tailwind CSS Z 索引类的功能
- Z-* 类用于根据元素在三维平面上的堆叠顺序显示元素。 {*} 此处指定顺序值范围为 0-50，即以 10 为单位跳过计数。
- Z-Auto:此类取代了 CSS 的 Z-index: auto; 属性，该属性指定了元素的默认行为，无需创建新的堆叠上下文。
Tailwind CSS Z-Index 类示例
以下示例将说明 Tailwind CSS Z 索引类的实用功能。
设置 z-index 以控制堆叠
以下示例说明了基于更高 Z 索引 的普通 <div> 元素的对齐方式。
示例
<!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>
使用负 z-index 控制堆栈
以下示例说明了如何在元素上使用负 Z-index。
示例
<!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>
