为什么你设置的 z-index 不生效？

z-index 这个 CSS 属性相信大家都不陌生，它通常用于控制当两个或多个元素发生重叠时它们之间的显示（层叠）顺序。

为什么设置了 z-index 但是不生效？

来看下这个例子。为什么设置了 box1 的 z-index 比 box2 的 z-index 值大，为什么 box1 不显示在上面覆盖 box2。

/* css */
.box1{
    
    
    z-index: 10;
    background-color: red;
}
.box2{
    
    
    z-index: 5;
    background-color: blue;
    margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>

在这里插入图片描述

层叠上下文

之所以你设置的 z-index 没有生效是因为你设置的元素没有形成 层叠上下文 。那么什么是层叠上下文？你可以这么理解，正常情况下 html 元素是左右上下排列的，相当于沿着 x，y轴排列，那么层叠上下文为我们引入了一个 z 轴的概念，假如我们正对着浏览器（页面），浏览器与用户之间的这条线就是 z 轴。
当元素形成层叠上下文时就可以设置 z-index 的值大小控制元素在 z 轴上的堆叠顺序，来实现元素之间“覆盖”的效果

生成层叠上下文

可以通过以下常见的属性生成层叠上下文

position 的值不为 static（注意当值为 absolute、relative时 z-index 不能为 auto）
display: flex; 布局的子元素，且 z-index 的值不能为 auto
display: grid; 布局的子元素，且 z-index 的值不能为 auto
opacity 值小于 1 的元素
transform 的值不为 none
perspective 的值不为 none
filter 的值不为 none

看个例子：因为设置了 position 的值所以 z-index 的值有效。

<!-- css -->
.box1{
    
    
    z-index: 10;
    background-color: red;
    position: relative;
}
.box2{
    
    
    z-index: 5;
    background-color: blue;
    margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>

在这里插入图片描述

最后

看个例子：

/* css */
.box{
    
    
    width: 200px;
    height: 100px;
    background-color: red;
    color: #fff;
    z-index: 5;
    position: relative;
}
.box1{
    
    
    width: 120px;
    height: 50px;
    background-color: green;
    color: #fff;
    position: relative;
    z-index: 10;
}
.box2{
    
    
    width: 120px;
    height: 50px;
    background-color: rgb(70, 0, 128);
    color: #fff;
    position: relative;
    z-index: 7;
    margin-top: -10px;
    padding-top: 10px;
}
.box3{
    
    
    width: 120px;
    height: 100px;
    background-color: blue;
    color: #fff;
    margin: -70px 0 0 90px;
    position: relative;
    z-index: 6;
    text-align: right;
}
/* HTML */
<div class="box">
    <div class="box1">z-index: 10</div>
    <div class="box2">z-index: 5</div>
</div>
<div class="box3">z-index: 4</div>

在这里插入图片描述

box、box1、box2、box3 各为一个层叠上下文。box 的层叠上下文包含 box1 box2，说明层叠上下文可以包含层叠上下文。
box 的 z-index 值小于 box3 的 z-index 值，所以 box3 覆盖 box 显示在上层，然而 box1、box2 的 z-index 值大于 box3 的 z-index 值，却也被 box3 覆盖显示在下层，说明子元素的层叠关系受父元素的限制，换句话说两个元素层叠顺序不受子元素 z-index 大小影响。

小技巧：怎么查看元素有没有形成层叠上下文？

使用工具 Edge 浏览器，F12 后选择 3d视图 tab 栏。勾选如下图选项，元素有显示 z-index 值时说明就形成了层叠上下文。

在这里插入图片描述