浅析CSS 中z - index属性的作用及在什么情况下会失效_Css

大白话谈谈 css 中z - index属性的作用及在什么情况下会失效。

1. z-index 属性的作用

在 css 里，z-index 属性就像是一个“楼层控制器”。想象一下网页是一座大楼，页面上的每个元素都处在不同的楼层，而 z-index 就是用来决定每个元素所在楼层高度的。值越大，元素所处的楼层就越高，也就会显示在越上层，就越容易被看到。

下面是一个简单的例子，用来说明 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示例</title>
    <style>
        /* 创建一个类名为box的样式，设置宽度、高度、背景颜色和绝对定位 */
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        /* 第一个盒子，设置背景颜色为红色，z-index为1，意味着它在第二层（0是默认层） */
        .box1 {
            background-color: red;
            z-index: 1;
        }
        /* 第二个盒子，设置背景颜色为蓝色，z-index为2，它在第三层，会显示在红色盒子上面 */
        .box2 {
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <!-- 创建第一个盒子 -->
    <div class="box box1"></div>
    <!-- 创建第二个盒子 -->
    <div class="box box2"></div>
</body>
</html>

在这个例子中，蓝色盒子的 z-index 值比红色盒子大，所以蓝色盒子会显示在红色盒子的上面。

2. z-index 失效的情况

2.1 元素没有定位属性

z-index 只有在元素的 position 属性值为 relative、absolute、fixed 或者 sticky 时才会生效。如果元素的 position 属性是默认值 static，那么 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失效示例 - 无定位</title>
    <style>
        /* 创建一个类名为box的样式，设置宽度、高度和背景颜色 */
        .box {
            width: 100px;
            height: 100px;
        }
        /* 第一个盒子，设置背景颜色为红色，z-index为1，但由于没有定位，z-index不起作用 */
        .box1 {
            background-color: red;
            z-index: 1;
        }
        /* 第二个盒子，设置背景颜色为蓝色，z-index为2，但由于没有定位，z-index不起作用 */
        .box2 {
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <!-- 创建第一个盒子 -->
    <div class="box box1"></div>
    <!-- 创建第二个盒子 -->
    <div class="box box2"></div>
</body>
</html>

在这个例子中，两个盒子都没有设置定位属性，所以它们的 z-index 都不会生效，会按照 html 文档中的顺序依次显示。

2.2 元素处于不同的堆叠上下文

堆叠上下文就像是不同的大楼，每个大楼里的元素只能和同一大楼里的元素比较 z-index。如果元素处于不同的堆叠上下文，那么它们的 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失效示例 - 不同堆叠上下文</title>
    <style>
        /* 创建一个类名为parent的样式，设置宽度、高度、背景颜色和相对定位，这会创建一个新的堆叠上下文 */
        .parent {
            width: 200px;
            height: 200px;
            position: relative;
        }
        /* 第一个父元素，设置背景颜色为灰色 */
        .parent1 {
            background-color: gray;
        }
        /* 第二个父元素，设置背景颜色为黄色 */
        .parent2 {
            background-color: yellow;
        }
        /* 创建一个类名为box的样式，设置宽度、高度、背景颜色和绝对定位 */
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        /* 第一个盒子，设置背景颜色为红色，z-index为2 */
        .box1 {
            background-color: red;
            z-index: 2;
        }
        /* 第二个盒子，设置背景颜色为蓝色，z-index为1 */
        .box2 {
            background-color: blue;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 创建第一个父元素 -->
    <div class="parent parent1">
        <!-- 在第一个父元素里创建第一个盒子 -->
        <div class="box box1"></div>
    </div>
    <!-- 创建第二个父元素 -->
    <div class="parent parent2">
        <!-- 在第二个父元素里创建第二个盒子 -->
        <div class="box box2"></div>
    </div>
</body>
</html>

在这个例子中，两个父元素都创建了自己的堆叠上下文，红色盒子和蓝色盒子分别属于不同的堆叠上下文，所以它们的 z-index 不能直接比较，最终显示效果不是由 z-index 决定的。

如何解决z-index失效的问题？

当 z-index 失效时，可依据不同的失效原因采取对应的解决办法。下面是针对常见失效情形的解决策略：

1. 元素没有定位属性

若元素的 position 属性为默认值 static，z-index 是不会生效的。要解决这个问题，需把元素的 position 属性设置成 relative、absolute、fixed 或者 sticky。

以下是示例代码，展示如何通过设置定位属性来让 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因无定位失效问题</title>
    <style>
        /* 创建一个类名为box的样式，设置宽度、高度、背景颜色和相对定位 */
        .box {
            width: 100px;
            height: 100px;
            position: relative; /* 设置定位属性 */
        }
        /* 第一个盒子，设置背景颜色为红色，z-index为1 */
        .box1 {
            background-color: red;
            z-index: 1;
        }
        /* 第二个盒子，设置背景颜色为蓝色，z-index为2 */
        .box2 {
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <!-- 创建第一个盒子 -->
    <div class="box box1"></div>
    <!-- 创建第二个盒子 -->
    <div class="box box2"></div>
</body>
</html>

在这个例子中，把 .box 类的 position 属性设置成 relative，这样 z-index 就能生效了，蓝色盒子会显示在红色盒子之上。

2. 元素处于不同的堆叠上下文

若元素处于不同的堆叠上下文，它们的 z-index 无法直接比较。为解决此问题，可通过调整堆叠上下文的层级或者让元素处于同一堆叠上下文。

2.1 调整堆叠上下文的层级

可以给父元素设置 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因不同堆叠上下文失效问题 - 调整层级</title>
    <style>
        /* 创建一个类名为parent的样式，设置宽度、高度、背景颜色、相对定位和z-index */
        .parent {
            width: 200px;
            height: 200px;
            position: relative;
        }
        /* 第一个父元素，设置背景颜色为灰色，z-index为1 */
        .parent1 {
            background-color: gray;
            z-index: 1;
        }
        /* 第二个父元素，设置背景颜色为黄色，z-index为2 */
        .parent2 {
            background-color: yellow;
            z-index: 2;
        }
        /* 创建一个类名为box的样式，设置宽度、高度、背景颜色和绝对定位 */
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        /* 第一个盒子，设置背景颜色为红色 */
        .box1 {
            background-color: red;
        }
        /* 第二个盒子，设置背景颜色为蓝色 */
        .box2 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 创建第一个父元素 -->
    <div class="parent parent1">
        <!-- 在第一个父元素里创建第一个盒子 -->
        <div class="box box1"></div>
    </div>
    <!-- 创建第二个父元素 -->
    <div class="parent parent2">
        <!-- 在第二个父元素里创建第二个盒子 -->
        <div class="box box2"></div>
    </div>
</body>
</html>

在这个例子中，通过给父元素设置 z-index，调整了它们的堆叠上下文层级，使得第二个父元素及其子元素会显示在第一个父元素及其子元素之上。

2.2 让元素处于同一堆叠上下文

可以移除不必要的父元素定位或者调整 html 结构，让元素处于同一堆叠上下文。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决z-index因不同堆叠上下文失效问题 - 同一上下文</title>
    <style>
        /* 创建一个类名为box的样式，设置宽度、高度、背景颜色和绝对定位 */
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        /* 第一个盒子，设置背景颜色为红色，z-index为1 */
        .box1 {
            background-color: red;
            z-index: 1;
        }
        /* 第二个盒子，设置背景颜色为蓝色，z-index为2 */
        .box2 {
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <!-- 创建第一个盒子 -->
    <div class="box box1"></div>
    <!-- 创建第二个盒子 -->
    <div class="box box2"></div>
</body>
</html>

在这个例子中，移除了不必要的父元素定位，让两个盒子处于同一堆叠上下文，这样 z-index 就能正常比较，蓝色盒子会显示在红色盒子之上。

z-index属性在不同的浏览器中的表现有差异吗？

z-index 属性在现代主流浏览器（如 chrome、firefox、safari、edge 等）中的基本表现是一致的，但在一些特殊场景和旧版本浏览器中可能存在差异，下面为你详细介绍：

现代主流浏览器的一致性表现

在现代主流浏览器里，z-index 的基本功能表现一致。当元素设置了 position 属性（relative、absolute、fixed 或 sticky）后，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 一致性示例</title>
    <style>
        /* 设置盒子的通用样式，包括宽度、高度、定位和背景颜色 */
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        /* 红色盒子，设置 z-index 为 1 */
        .red-box {
            background-color: red;
            z-index: 1;
        }
        /* 蓝色盒子，设置 z-index 为 2 */
        .blue-box {
            background-color: blue;
            z-index: 2;
        }
    </style>
</head>
<body>
    <!-- 创建红色盒子 -->
    <div class="box red-box"></div>
    <!-- 创建蓝色盒子 -->
    <div class="box blue-box"></div>
</body>
</html>

在 chrome、firefox、safari 和 edge 等现代浏览器中运行这段代码，蓝色盒子都会显示在红色盒子之上。

特殊场景和旧版本浏览器的差异

1. 堆叠上下文的创建规则

在某些旧版本浏览器中，堆叠上下文的创建规则可能和现代标准存在差异。例如，在旧版 internet explorer 中，opacity 属性值小于 1 就会创建堆叠上下文，而现代浏览器只有在特定情况下才会如此。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠上下文差异示例</title>
    <style>
        /* 父元素设置相对定位和透明度 */
        .parent {
            position: relative;
            opacity: 0.9;
        }
        /* 子元素设置绝对定位和 z-index */
        .child {
            position: absolute;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">child element</div>
    </div>
</body>
</html>

在旧版 internet explorer 中，.parent 元素会创建一个新的堆叠上下文，这可能会影响 .child 元素与其他元素的堆叠顺序，而现代浏览器可能不会受此影响。