层叠上下文
2020-11-23 本文已影响0人
我是Msorry
层叠顺序
内联元素和块级元素的层叠顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{
width:200px;
height:200px;
padding:10px;
border:10px solid rgba(255,0,0,0.5);
background:black;
}
.box2{
width:200px;
height:200px;
padding:10px;
border:10px solid rgba(255,0,0,0.5);
background:white;
text-indent:-20px;
}
.child{
height:20px;
background:#f60;
margin-top:-20px;
}
</style>
</head>
<body>
<div class='box1'></div>
<div class='box2'>
hello
<div class="child"></div>
</div>
</body>
</html>
box1 边框的颜色比 box2 的颜色深，说明边框在背景的上层；box2 的文字在边框和块级元素的上层
inline(inline-block) > block > border > background
内联元素、块级元素、浮动元素的层叠顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{
width:200px;
height:200px;
padding:10px;
border:10px solid rgba(255,0,0,0.5);
background:white;
text-indent:-20px;
}
.float{
height:30px;
width:30px;
background:#f60;
float:left;
}
.child{
height:20px;
background:purple;
}
</style>
</head>
<body>
<div class='box1'>
hello
<div class="float"></div>
<div class='child'></div>
</div>
</body>
</html>
box1 的文字在浮动元素的上层，浮动元素在块级元素的上层
inline(inline-block) > float > block > border > background
定位元素的层叠顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{
width:200px;
height:200px;
padding:10px;
border:10px solid rgba(255,0,0,0.5);
background:white;
text-indent:-20px;
}
.float{
height:50px;
width:50px;
background:#f60;
float:left;
}
.child{
height:40px;
background:purple;
}
.relative1{
width:60px;
height:60px;
background:blue;
margin-top:-30px;
position:relative;
}
.relative2{
width:60px;
height:60px;
background:orange;
position:relative;
margin-top:-10px;
}
</style>
</head>
<body>
<div class='box1'>
hello
<div class="float"></div>
<div class='child'></div>
<div class="relative1"></div>
<div class="relative2"></div>
</div>
</body>
</html>
relative > inline(inline-block) > float > block > border > background
z-index
该属性只对定位元素及其后代元素或 flex 项目起作用；当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。
当父级元素没有定位时层叠顺序
- 正z-index > relative(z-index=0) > inline(inline-block) > float > block > border > background > 负z-index
- 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{
width:200px;
height:200px;
padding:10px;
border:10px solid rgba(255,0,0,0.5);
background:white;
text-indent:-20px;
}
.float{
height:50px;
width:50px;
background:#f60;
float:left;
}
.child{
height:40px;
background:purple;
}
.relative1{
width:60px;
height:60px;
background:blue;
margin-top:-30px;
position:relative;
z-index:1;
}
.relative2{
width:100px;
height:100px;
background:orange;
position:relative;
margin-top:80px;
z-index:-1;
}
</style>
</head>
<body>
<div class='box1'>
hello
<div class="float"></div>
<div class='child'></div>
<div class="relative1"></div>
<div class="relative2"></div>
</div>
</body>
</html>
层叠上下文
假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。
image.png
满足以下任意一个条件的元素形成层叠上下文：
- 文档根元素（
<html>)； -
position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素 -
position值为fixed（固定定位）或sticky（粘滞定位）的元素 -
flex或grid容器的子元素，且z-index值不为auto，即：父元素display: flex|inline-flex或display: grid -
opacity属性值小于 1 的元素 -
mix-blend-mode属性值不为normal的元素 -
filter值不为none的元素 -
perspective值不为none的元素 -
isolation属性被设置为isolate的元素， -
will-change中指定任意 CSS 属性 -
-webkit-overflow-scrolling属性被设置touch的元素
当父级元素定位时，且 z-index 的值不为 auto的层叠顺序
此时父级元素为一个层叠上下文
- 正z-index > relative(z-index=0) > inline(inline-block) > float > block > 负z-index > border > background
- 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{
width:200px;
height:200px;
padding:10px;
border:10px solid rgba(255,0,0,0.5);
background:white;
text-indent:-20px;
position:relative;
background:green;
z-index:0;
}
.float{
height:50px;
width:50px;
background:#f60;
float:left;
}
.child{
height:40px;
background:purple;
}
.relative1{
width:100px;
height:100px;
background:orange;
position:relative;
margin-top:-30px;
z-index:-1;
}
</style>
</head>
<body>
<div class='box1'>
hello
<div class="float"></div>
<div class='child'></div>
<div class="relative1"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
height:200px;
width:200px;
padding:10px;
border:10px solid rgba(255,0,0,1);
background:green;
margin:12px;
}
.relative{
width:100px;
height:100px;
background:orange;
position:relative;
border:1px solid red;
}
.a1,.b1{
background:green;
position:relative
}
.a1{
z-index:2
}
.b1{
background:blue;
margin-top:-90px;
z-index:0
}
.a{
z-index:1;
}
.b{
z-index:2;
}
</style>
</head>
<body>
<div class='box1'>
<div class="a relative">a
<div class='a1'>a1</div>
</div>
<div class="b relative">b
<div class='b1'>b1</div>
</div>
</div>
</body>
</html>
