CSS z-index|极客教程

CSS z-index

在CSS中，当元素发生重叠时，通过z-index属性可以控制元素的堆叠顺序。z-index属性是一个整数值，用来定义元素在堆叠上下文中的层级关系。在本文中，我们将详细介绍z-index属性的使用方法和注意事项。

基本概念

在CSS中，元素可以分为块级元素和行内元素。对于块级元素，它们通常会被放置在页面的不同位置，并且可能会发生重叠。在这种情况下，我们需要通过z-index属性来指定元素的层叠顺序。

在CSS中，z-index属性的默认值是auto，表示元素的层叠顺序由它们在HTML文档中的位置决定。元素越靠后，其z-index值越大，将会覆盖在前面的元素之上。

使用方法

基本语法

z-index属性可以应用于所有定位元素（即position属性不为static的元素），包括relative、absolute、fixed和sticky定位的元素。其基本语法如下：

.element {
  position: relative; /* 或者其他定位方式 */
  z-index: <number>;
}

数值设定

z-index属性的值可以为任意整数值，负数和小数将会被转换成整数值。根据z-index的设定值，元素将按照层级从大到小进行堆叠。z-index值较大的元素将覆盖z-index值较小的元素。

比较

如果两个元素同时设置了z-index属性，那么它们的层级关系将会根据它们在文档流的位置进行比较。通常情况下，后面出现的元素会覆盖前面的元素。但是如果后面的元素的z-index值比前面的元素大，那么后面的元素会覆盖前面的元素。

堆叠上下文

在CSS中，每个元素都有一个层叠上下文（stacking context）。层叠上下文定义了元素的层叠顺序，并且可以影响到z-index的表现。当一个元素形成了层叠上下文时，其子元素的z-index值只在该层叠上下文中起作用。

全局层叠上下文

文档的根元素（html标签）以及绝对（position: absolute/fixed）定位的元素都形成了全局层叠上下文。全局层叠上下文的z-index值会覆盖普通的层叠上下文，即使后者的z-index值较大。

注意事项

父子关系

在HTML中，元素的层级关系是一个树状结构，即父子关系。当父元素的z-index值大于子元素的z-index值时，父元素会覆盖子元素。因此，如果需要控制子元素的层级关系，可以在父元素上设置z-index值。

全局层叠上下文

全局层叠上下文有时会导致意想不到的显示效果。为了避免这种情况，可以尽量减少全局层叠上下文的使用，或者通过设置z-index值来调整元素的层级关系。

层数限制

在实际开发中，z-index的值有一个上限值。在大多数浏览器中，z-index的最大值为2147483647。如果z-index值超过了这个上限值，可能会导致显示错误。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>z-index Demo</title>
  <style>
    .parent {
      position: relative;
      z-index: 1;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .child {
      position: absolute;
      z-index: 2;
      width: 100px;
      height: 100px;
      background-color: red;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">Child</div>
  </div>
</body>
</html>

在上面的示例中，我们创建了一个父元素和一个子元素，它们都设置了z-index值。子元素的z-index值大于父元素的z-index值，因此子元素会覆盖父元素。运行代码后，可以看到子元素被放置在父元素之上，显示为红色。