CSS | z-index 属性

z-index 属性用于为元素设定堆叠顺序，即决定哪个元素出现在其他元素之上。该属性只对定位元素（绝对定位、相对定位、固定定位）有效。

语法

z-index: number|auto|initial|inherit;

值

• number：指定堆叠顺序的值，取值范围是整数、负数和 0。数值越大，元素越靠上。默认值是 0。
• auto：元素的堆叠顺序由父元素决定，如果父元素没有设置 z-index，则跟父元素一样是 0。
• initial：设定为默认值 0。
• inherit：取父元素的堆叠顺序。

实例

示例 1

下面的代码将两个 div 层叠在一起，其中第二个 div 在第一个 div 之上。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  position: relative;
}

.box1 {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 300px;
}

.box2 {
  position: absolute;
  background-color: blue;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  z-index: 1;
}

示例 2

下面的代码将两个 div 层叠在一起，其中第二个 div 在第一个 div 之下。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  position: relative;
}

.box1 {
  position: absolute;
  background-color: red;
  width: 300px;
  height: 300px;
}

.box2 {
  position: absolute;
  background-color: blue;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  z-index: -1;
}

注意事项

• z-index 仅对定位元素有效，对其他元素无效。
• 默认情况下，所有元素的 z-index 均为 auto。
• 在同一层级内，z-index 值越大的元素会覆盖在其下层的元素之上。
• 不同层级之间 z-index 是不可比较的。例如 A 层级的 z-index 是 2，B 层级的 z-index 是 1，A 和 B 是同级的，无法比较大小。
• z-index 可以设置为负数。