CSS 堆叠覆盖
如下图所示：
其中需要注意的是，行元素是 后定义的 高于 前定义的 ，"z-index≥0" 高于 上下文所有元素。
代码如下：
<div class="parent">
<span>层叠上下文背景色及边框</span>
<div class="minus-z-index">
z-index: -1
</div>
<div class="position-zero">
z-index: 0
</div>
<div class="inline-block">
[email protected]
</div>
<div class="float">
float
</div>
<div class="normal">
正常流式布局
</div>
<p class="text-one">@@</p>
<p class="text-two">@@</p>
<p class="text-three">@@@@</p>
</div>.parent{
margin-left: 10px;
margin-top: 50px;
background: #B780C7;
border: 3px solid #000;
width: 200px;
height: 130px;
position: relative;
}
div{
width: 200px;
height: 30px;
padding-bottom: 30px;
}
.minus-z-index{
background: #8B7BC3;
position: relative;
top: -60px;
left: -20px;
z-index: -1;
margin-top: 10px;
}
.normal{
background: #4E70C4;
margin-left: 20px;
margin-top: -75px;
}
.float{
background: #4BBC8D;
float: left;
margin-left: 30px;
margin-top: -50px;
}
.inline-block{
background: #DFAE48;
display: inline-block;
margin-left: 40px;
margin-bottom: -50px;
}
.position-zero{
background: #9CC65F;
position: relative;
z-index: 0;
margin-left: 50px;
margin-top: 20px;
margin-bottom: -90px;
}
.text-one{
color: white;
font-weight: bold;
margin-left: 125px;
margin-top: -13px;
}
.text-two{
color: blue;
font-weight: bold;
margin-left: 125px;
margin-top: -30px;
}
.text-three{
color: green;
font-weight: bold;
margin-left: 10px;
margin-top: -30px;
}