CSS z-index - 在W3Schools学习如何定位HTML元素，使用z-index属性

一、什么是z-index属性

z-index是CSS属性，用于控制同一层级内元素的堆叠顺序。在HTML中，元素一般是从上往下依次堆叠，而z-index可以改变这个顺序。具有较高z-index值的元素会在堆叠中覆盖具有较低z-index值的元素。z-index值越大的元素，就越靠近屏幕的前端。

一般情况下，z-index属性只适用于使用了定位（position）的元素，如position: relative;、position: absolute;或position: fixed;。因为只有定位的元素才能和其他元素重合，并且参与z-index的计算。

以下是一个简单的示例代码：

<div class="container">
  <div class="block green"></div>
  <div class="block red"></div>
</div>

CSS:

.container {
  position: relative;
}

.block {
  width: 200px;
  height: 200px;
  position: absolute;
}

.green {
  background-color: green;
  z-index: 1;
  top: 0;
  left: 0;
}

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

在这个例子中，我们创建了两个块（green和red），它们都被放置在具有相对定位的容器（container）内。块的定位使用了绝对定位，并设置了top和left值。其中，green块具有较低的z-index，而red块具有较高的z-index。因此，red块会向前移动，覆盖green块。

二、z-index属性值

z-index属性可以接受多种类型的值。下面列举了一些常见的z-index值，以及它们的含义：

• auto：此为z-index的默认值，意味着元素将会以正常顺序进行堆叠。
• 整数值：可设置正整数、负整数或0。正整数值越大的元素，越靠近顶部。负整数值越小的元素，越靠近底部。0值在整数值之前，普通的定位元素也会在0值之上。
• inherit：继承父元素的z-index值。
• initial：设置为默认值auto。
• unset：未设置任何值时，设置为initial或inherit。

三、z-index堆叠顺序的注意事项

在使用z-index属性时，有几个值得注意的地方：

1. z-index只在定位元素之间进行堆叠排序。非定位元素的z-index值无效。
2. 在同一层级内，元素越在后面，其z-index值也越小。例如，位置靠后的元素z-index默认是小于位置靠前的元素。
3. 在某些情况下，定位元素可能不会按您预期的方式进行堆叠。这通常是因为该元素的z-index值被父级元素的z-index所覆盖。此时，可以尝试更改父级元素的z-index值，以改变该元素的堆叠顺序。

四、总结

在使用z-index属性时，需要注意以下几点：

• z-index只适用于定位元素
• 设置的z-index值越大，越靠近前面
• 非定位元素的z-index值无效
• 整数值表示堆叠顺序，而不是层数
• 在同一层级内，元素越在后面，其z-index值也越小
• z-index值被父级元素的z-index所覆盖时，可以尝试更改父级元素的z-index值