布局
用于控制元素堆叠顺序的实用工具。
类 | 样式 |
---|---|
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>
了解有关在变体文档中使用变体的更多信息。