与默认的堆叠上下文规则,z-index较复杂。所以先介绍默认的上下文堆叠规则
(一),默认content堆叠规则(由下至上)
Root element—根元素(如html,body)
nonpositioned element—未定位元素(没有position和opacity属性)
float element—浮动元素(z-index对其无任何效果,且彼此不会覆盖,不含opacity属性)
positioned element—已定位元素(存在position和opacity属性)
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
<title>堆叠层级规则以及z-index应用</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body{
background-color: burlywood;
padding: 20px;
}
#nonposition-box{
width: 1200px;
height: 150px;
text-align: center;
}
.nonposition-box1{
margin: 20px;
background-color: firebrick;
}
.nonposition-box2{
margin: -120px 20px 20px 0px;
background-color: aqua;
}
.abs-box{
position: absolute;
left: 50px;
top: 0px;
width: 200px;
height: 500px;
background-color: #0000FF;
opacity: 0.7;
text-align: center;
}
.rel-box{
position: relative;
top: -200px;
left: 50px;
width: 200px;
height: 500px;
background-color: olivedrab;
opacity: 0.7;
text-align: center;
}
.flo-box{
float: left;
margin:-600px 0 0 100px;
width: 500px;
height: 200px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div id="nonposition-box" class="nonposition-box1">This a nonpositionbox---BOX1</div>
<div class="abs-box">This is a absbox---BOX2</div>
<div id="nonposition-box" class="nonposition-box2">This a nonpositionbox---BOX3</div>
<div class="rel-box">This is a relbox---BOX4</div>
<div class="flo-box">This is a flobox---BOX5</div>
</body>
</html>
运行截图:
值得注意的是:只要含有position或则opacity就为定位元素,且上述规则与html中的顺序无关;若两个div是同等级的,则就按照html顺序判定,越晚越上。
(二),存在z-index时的堆叠规则(仅作用于定位元素,在同一父类中,数值越大,z轴方向越高,堆叠位置越上且不高于父类上级)。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
<title>堆叠层级规则以及z-index应用</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body{
background-color: burlywood;
padding: 20px;
}
.abs-box{
position: absolute;
left: 50px;
top: 0px;
width: 200px;
height: 500px;
background-color: #0000FF;
opacity: 0.7;
text-align: center;
z-index: 3;
}
.rel-box{
position: relative;
top: 0px;
left: 150px;
width: 200px;
height: 500px;
background-color: olivedrab;
text-align: center;
z-index: 2;
}
.rel-box1{
position: inherit;
width: 300px;
height: 150px;
background-color: beige;
opacity: 0.7;
z-index: 5;
}
.rel-box2{
position: inherit;
top: -50px;
left: 50px;
width: 300px;
height: 150px;
color: darkblue;
opacity: 0.7;
background-color: red;
z-index: 4;
}
.opa-box{
opacity: 0.7;
margin:-400px 0 0 100px;
width: 500px;
height: 200px;
background-color: orange;
text-align: center;
z-index: 1;
}
</style>
</head>
<body>
<div class="abs-box">This a BOX1</div>
<div class="rel-box">
This a BOX2
<div class="rel-box1">BOX2---box1</div>
<div class="rel-box2">BOX2---box2</div>
</div>
<div class="opa-box">This a BOX3</div>
</body>
</html>
运行截图:
值得注意:BOX1的z-index=3;B0X2—box1和B0X2—box2的z-index分别为5,4;但是却是BOX1在最上面。这是因为B0X2—box1,B0X2—box2的z-index无论多大都是在BOX1这个父类的堆叠content内,所以其子代是怎末都不会高于其父类的高一级,因为不在同一层次的堆叠content内;反推B0X2子代z-index无论多小,都不会低于BOX1.
推荐网站
菜鸟爬行中…