使用 CSS z-index 属性

使用 CSS z-index 属性控制元素的层级关系

CSS 中的 z-index 属性可以控制元素在堆叠（包括文档流和浮动元素）顺序中的层级关系。在默认情况下，HTML 元素按照它们出现在 HTML 代码中的顺序依次叠放。

但有时候元素的层级顺序需要进行一些调整，比如有一幅背景图片需要呈现在其他所有元素之上，或者希望把一个元素置于所有其他元素之下等等。这些需求就需要使用 z-index 属性来控制元素的层级关系。

z-index 属性的语法

CSS 中的 z-index 语法非常简单，它只包含一个整数值作为属性值：

.element {
  z-index: 1;
}

当 z-index 值越大，元素会越靠近用户，即层级越高。默认情况下，所有元素的 z-index 值都为 "auto"，这时元素按照它们出现在 HTML 代码中的顺序依次叠放。

z-index 属性的作用对象

z-index 属性可以应用于 "position" 属性值为 "absolute"、"relative" 或 "fixed" 的元素，而其他的元素则不受影响。另外，z-index 属性只能影响同级元素或其子元素的层级关系，如果两个元素不是同级元素，即使其中一个元素的 z-index 值比另一个高，也无法改变它们的层级关系。

z-index 属性的注意事项

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

1. z-index 属性对后代元素的影响

使用 z-index 属性时，可能会影响到后代元素的层级关系。比如，我们设置了一个元素的 z-index 值为较高的值，如果这个元素包含了子元素，那么子元素的层级关系也会随之变化。下面就是一个例子：

.parent {
  position: relative;
  z-index: 1;
}
.child {
  position: absolute;
  z-index: -1;
}

在这个例子中，"parent" 类元素的 z-index 值为 1，而它包含的子元素 "child" 类的 z-index 值为 -1，子元素的 z-index 值比父元素小，理论上应该在父元素下面。但是，由于父元素的 z-index 值比子元素大，所以子元素会覆盖在父元素上方：

我们可以通过改变子元素的 z-index 值来实现上下级元素的正确叠放顺序。

2. z-index 属性与层叠上下文

如果一个元素形成了一个新的层叠上下文，那么它的层级关系会相对于其同级的元素发生改变。当 z-index 值和层叠上下文在一起时，它们可能会比我们预期的产生更复杂的效果。

一个元素形成的新的层叠上下文，可以通过一些 CSS 属性来实现，比如 position (除了 "static" 值)、opacity、transform 等等。下面是一个例子：

.parent1 .child1 {
  z-index: 2;
}
.parent2 .child2 {
  z-index: 1;
  position: relative;
}

在这个例子中，"child1" 类在 "parent1" 类下面，"child2" 类在 "parent2" 类下面。因为 "child2" 类元素是 "relative" 定位的，所以它会创建一个新的层叠上下文。父级有 z-index 值没有 layer 层，所以只有在 "child2" 类所处的层叠上下文中，"child2" 类元素才处于 "child1" 类元素的上面。结果如下图：

3. z-index 只能使用整数值

使用 z-index 属性时，需要注意，z-index 值必须是整数，不可以使用小数或百分数。如果使用了小数值或百分数，浏览器会自动将其截取为整数。下面是一个例子：

.element {
  z-index: 0.6;
}

在这个例子中，虽然我们设置了 z-index 值为 0.6，但实际上浏览器会把它截取为 0，也就是和默认的层叠顺序一样。

总结

z-index 属性是 CSS 中用于控制元素层级关系的非常简单且重要的属性，使用该属性可以控制网页上元素的叠放顺序，让我们的网页更加优美。但在使用时，需要注意一些细节，包括 z-index 值类型、后代元素的影响和层叠上下文等，只有熟悉了这些细节才能确保元素的正确叠放顺序。