1. 布局
  2. z-index

布局

z-index

用于控制元素堆叠顺序的实用工具。

样式
z-<数字>
z-index: <数字>;
z-auto
z-index: auto;
z-[<值>]
z-index: <值>;
z-(<自定义属性>)
z-index: var(<自定义属性>);

示例

基本示例

使用 z-<数字> 实用工具(如 z-10z-50)来控制元素的堆叠顺序(或三维定位),而无需考虑元素的显示顺序

05
04
03
02
01
<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 值,请在类名前面加上破折号,将其转换为负值

01
02
03
04
05
<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>

了解有关在变体文档中使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策