浅谈为什么我的 z-index 又不生效了

我会详细讲解浅谈为什么我的 z-index 又不生效了的完整攻略。

1. 理解 z-index 属性

首先，我们需要理解 z-index 属性。z-index 属性是 CSS 的一个很重要的属性，用于设置元素的层级关系。它是一个整数值，数值越大，相对于其他元素就越靠上，就会显示在其他元素的前面。

2. z-index 属性的设置要求

接下来，我们需要了解 z-index 属性的设置要求。如果我们希望设置一个元素的 z-index 属性生效，需要满足以下三个要求：

• 元素的 position 属性必须设置为 absolute、fixed、relative 中的任意一个。
• z-index 属性值必须为正整数值。
• 元素的 z-index 属性值必须比其兄弟元素的 z-index 属性值更大。

3. 示例1：z-index 不生效的原因

假设我们有如下 HTML 代码：

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

CSS 代码为：

.box {
  width: 100px;
  height: 100px;
  position: relative;
}

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

.box2 {
  background-color: blue;
  z-index: 2;
}

希望红色框框在蓝色框框下面，但实际上红色框框是在蓝色框框上面。

这是因为，虽然我们设置了 box1 的 z-index 为 1，同时设置了 box2 的 z-index 为 2，但是我们没有给 box1 或 box2 设置 position 属性为 absolute、fixed、relative 中的任意一个。所以，他们都没有形成一个新的容器，而如果没有容器，他们的 z-index 也就没有意义。

4. 示例2：z-index 生效的方法

那么，我们来修改 CSS 代码，如下：

.container {
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

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

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

同时，在 HTML 代码中添加一个父容器：

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

这时，红色框框的 z-index 就生效了，他在蓝色框框下面。这是因为：

• 我们给 container 容器设置了 position: relative 属性，形成了一个新的容器。这时，其子元素 box1 和 box2 的 z-index 值就有了意义。
• 我们给 box1 设置了 z-index: 1，同时，他的位置在 box2 的上面。

综上，这两个示例告诉我们，为了让 z-index 属性生效，我们需要满足 z-index 属性的设置要求，并给元素的容器设置 position: relative 属性，形成新的容器。如果任何一个要求不满足，z-index 属性就无法生效。