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 值时说明就形成了层叠上下文。