你真的了解z-index吗？z-index为什么有时候会失效？
站长
· 阅读数 2
概念
z-index属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。
使用场景
DOM元素被遮盖住了，需要z-index元素提升该DOM的层级。
失效场景
1、给非定位元素设置
z-index 属性只对定位元素有效，即具有 position 属性值为 relative、absolute 或 fixed 的元素。这些元素会脱离文档流，并且它们的堆叠顺序可以通过 z-index 属性进行控制。
举例：这段代码是第三个盒子盖住了第二个盒子，第二个盖住了第一个。
效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dom {
width: 100px;
height: 100px;
border: 2px solid black;
}
.dom1 {
background-color: red;
z-index: 999;
}
.dom2 {
background-color: green;
margin-top: -50px;
}
.dom3 {
background-color: blue;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="dom dom1"></div>
<div class="dom dom2"></div>
<div class="dom dom3"></div>
</body>
</html>
若是我们想实现相反的覆盖，即第一个盖住第二个，第二个盖住第三个，那么就可以使用z-index。
想实现的效果如下：
此时的处理逻辑即给第一个盒子z-index:3，第二个z-index:2，第三个z-index:1，同时需要注意生效条件，加个定位.
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dom {
width: 100px;
height: 100px;
border: 2px solid black;
}
.dom1 {
background-color: red;
z-index: 3;
position: relative;
}
.dom2 {
background-color: green;
margin-top: -50px;
z-index: 2;
position: relative;
}
.dom3 {
background-color: blue;
margin-top: -50px;
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="dom dom1"></div>
<div class="dom dom2"></div>
<div class="dom dom3"></div>
</body>
</html>
2、给父子元素设置
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity 属性创建新的层叠上下文示例</title>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: #f00;
z-index: 9999; /* 提高父元素的 z-index */
}
.child {
position: relative;
width: 100px;
height: 100px;
background-color: #00f;
z-index: 1;
}
.grandchild {
position: absolute; /* 将 position 改为 absolute */
width: 50px;
height: 50px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
</body>
</html>
此时已经给父元素设置成了z-index: 9999;，父元素依然在最下面：
3、设置了transform、opcity等属性
某些 CSS 属性或值会创建新的层叠上下文，这可能影响元素的层叠顺序。
但是这里的影响并不是真正的影响到了层级，而是让开发者肉眼看可能影响了层级。
举例：
比如：这里给div加上opacity: 0.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dom {
width: 100px;
height: 100px;
border: 2px solid black;
}
.dom1 {
background-color: red;
z-index: 999;
}
.dom2 {
background-color: green;
margin-top: -50px;
opacity: 0.1; /* 设置属性 */
}
.dom3 {
background-color: blue;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="dom dom1"></div>
<div class="dom dom2"></div>
<div class="dom dom3"></div>
</body>
</html>
就会从
变为
看起来层级发生了变化
4、层级冲突
在实际应用场景中，我们可能会因为各种情况，设置很多的z-index,此时就会造成层级混乱，遇到层级冲突的问题，给不同层级的盒子设置成了同样的z-index。
5、设置浮动
比如：这段代码，我们分别给三个盒子设置 z-index: 1;z-index: 2;z-index: 3;
正常情况应当是，蓝色盖绿色，绿色盖红色
但是由于加上了浮动，倒是层级变为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.dom {
position: relative;
width: 100px;
height: 100px;
border: 2px solid black;
}
.dom1 {
background-color: red;
z-index: 1;
}
.dom2 {
background-color: green;
margin-top: -50px;
z-index: 2;
float: left; /* 改变了层级 */
}
.dom3 {
background-color: blue;
margin-top: -50px;
z-index: 3;
}
</style>
</head>
<body>
<div class="dom dom1"></div>
<div class="dom dom2"></div>
<div class="dom dom3"></div>
</body>
</html>
6、不支持的 z-index 值
z-index 只接受整数值，如果使用其他类型的值，可能会导致 z-index 失效。