Appearance
z-index 层级问题
这篇文章用来记录一个比较常见的z-index的问题,不知道大家在开发过程中是否遇到过,一个定位元素,无论我z-index设置的最高,哪怕设置了1000000都无法出现在页面上(原因不是因为有别的值设置的比他高),这篇文章我们来完整的过一遍这块的知识!
常规结构&层级
看一段最简单的html结构代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常规结构&层级</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>常规结构&层级</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>
在这段代码中,a1和a2都设置了绝对定位,且它们都没有设置z-index调整层级,这时候他们会按照默认结构进行层级排序
html结构后面的层级会更高
这个还是比较好理解的吧,如果我们想要让a1在a2的上面,只需要修改一下a1的 z-index 即可,如下:
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>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
/* 通过设置 z-index 即可让 同层级 的元素 位于更高一层 */
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</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>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
/* 通过设置 z-index 即可让 同层级 的元素 位于更高一层 */
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>
特殊结构
下面我们来看一个特殊的场景,这个场景就是,无论我们怎么设置z-index都没有效果的场景:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊代码结构</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
z-index: 5;
}
.a3 {
left: 30px;
top: 30px;
background-color: #e74c3c;
/*
这里即使 a3 的 z-index 比 a1 要高,但是它依旧是盖在a1下面的,
可以理解成 a3 的父元素 a2 都没有 a1 高 所以 它的 子元素也是没有办法比它高的
*/
z-index: 100;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2">
<div class="a3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊代码结构</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
z-index: 5;
}
.a3 {
left: 30px;
top: 30px;
background-color: #e74c3c;
/*
这里即使 a3 的 z-index 比 a1 要高,但是它依旧是盖在a1下面的,
可以理解成 a3 的父元素 a2 都没有 a1 高 所以 它的 子元素也是没有办法比它高的
*/
z-index: 100;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2">
<div class="a3"></div>
</div>
</body>
</html>
这段代码,a3是a2的一个子元素,我们即使给a3的z-index设置成100(最大),a3仍然位于a1(z-index = 10)的下面。效果如下:
原因是因为我们a2依旧是低于a1的,所以即使a3比a1高,它依旧无法展示,所以得出结论:z-index是受父级元素层级影响的
如果我们要实现层级结构为:a3>a1>a2,这时候就得修改代码的结构了:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊代码结构</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
z-index: 5;
}
.a3 {
left: 30px;
top: 30px;
background-color: #e74c3c;
z-index: 100;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊代码结构</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
z-index: 5;
}
.a3 {
left: 30px;
top: 30px;
background-color: #e74c3c;
z-index: 100;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</body>
</html>
效果如下:
到这里应该能够很清晰的理解这块的层级的逻辑了,不过我在调试的时候发现了一个非常诡异的问题,也没有理解,这里跟大家一起讨论一下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊代码结构</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
/* z-index: 5; */
}
.a3 {
left: 30px;
top: 30px;
background-color: #e74c3c;
z-index: 100;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2">
<div class="a3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊代码结构</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
}
.a1 {
background-color: #2ecc71;
left: 0;
top: 0;
z-index: 10;
}
.a2 {
background-color: #9b59b6;
left: 30px;
top: 30px;
/* z-index: 5; */
}
.a3 {
left: 30px;
top: 30px;
background-color: #e74c3c;
z-index: 100;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2">
<div class="a3"></div>
</div>
</body>
</html>
这里我们没有给a2设置层级,但是最终展示的效果又是a3>a1>a2如下这个效果:
非常疑惑,我也很是不解,和前面我们的理解又有出入了。有知道的同学可以把原因说下大家一起讨论下~