布局
用于控制元素堆叠顺序的实用工具。
| 类 | 样式 |
|---|---|
z-<数字> | z-index: <数字>; |
z-auto | z-index: auto; |
z-[<值>] | z-index: <值>; |
z-(<自定义属性>) | z-index: var(<自定义属性>); |
使用 z-<数字> 实用工具（如 z-10 和 z-50）来控制元素的堆叠顺序（或三维定位），而无需考虑元素的显示顺序
<div class="z-40 ...">05</div><div class="z-30 ...">04</div><div class="z-20 ...">03</div><div class="z-10 ...">02</div><div class="z-0 ...">01</div>要使用负 z-index 值，请在类名前面加上破折号，将其转换为负值
<div class="...">05</div><div class="...">04</div><div class="-z-10 ...">03</div><div class="...">02</div><div class="...">01</div>使用 z-[<值>] 语法 来设置堆叠顺序基于完全自定义的值
<div class="z-[calc(var(--index)+1)] ..."> <!-- ... --></div>对于 CSS 变量，您也可以使用 z-(<自定义属性>) 语法
<div class="z-(--my-z) ..."> <!-- ... --></div>这只是 z-[var(<自定义属性>)] 的简写形式，它会自动为您添加 var() 函数。
前缀a z-index 实用工具 与断点变体（如 md:）一起使用，以仅在中等 屏幕尺寸及以上尺寸的应用该实用工具
<div class="z-0 md:z-50 ..."> <!-- ... --></div>了解有关在变体文档中使用变体的更多信息。