CSS中的z-index

在CSS中，z-index属性用于指定元素的堆叠顺序。具有更高z-index值的元素将显示在具有较低值的元素之上，因此可以实现一些有趣的覆盖效果。

语法

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

其中，具体取值如下：

• auto：默认值，由浏览器自动决定元素的堆叠顺序。
• number：数字值，用于指定元素的堆叠顺序。较大的值将显示在较小的值之上。
• initial：将属性设置为它的默认值。
• inherit：继承父元素的值。

注意事项

• z-index只有在position属性的值为relative、absolute或fixed时才有作用。
• z-index的值必须为整数。如果是小数，则会被四舍五入为最接近的整数值。
• 在同一父元素下，z-index值较大的元素将覆盖较小的元素。但如果父元素的z-index比子元素的z-index小，那么子元素的z-index仍然会覆盖父元素下的其他元素。
• 通常情况下，不应该使用太大的z-index值。较大的值可能会造成意想不到的覆盖效果，甚至会遮盖其他元素。

示例

以下示例演示了如何使用z-index属性创建一个简单的覆盖效果。

/* HTML */
<div class="box box1"></div>
<div class="box box2"></div>

/* CSS */
.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.box1 {
  background-color: red;
  z-index: 1;
}

.box2 {
  background-color: blue;
  z-index: 2;
  top: -50px;
  left: 50px;
}

在此示例中，.box2覆盖了.box1，因为它的z-index值更高。

/* HTML */
<div class="box box1"></div>
<div class="box box2"></div>

/* CSS */
.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.box1 {
  background-color: red;
  z-index: 1;
}

.box2 {
  background-color: blue;
  z-index: 2;
  top: -50px;
  left: 50px;
}