相对定位后,元素重叠的情况
实例:
<style>
div{
border: 1px rgb(199, 199, 209) solid;
height: 125px;
position: absolute;
width:200px;
text-align: center;
}
.b1{
background:pink;
left: 100px;
top:50px;
z-index:100;
}
.b2{
background:blanchedalmond;
left: 0;
top:130px;
z-index:500;
}
.b3{
background: blue;
position: static;
z-index:1000;
}
.b4{
background:yellow;
left:285px;
top:65px;
z-index:3'
}
</style>
<body>
<div class="b1"><p>NO.1</p></div>
<div class="b2"><p>NO.2</p></div>
<div class="b3"><p>NO.3</p></div>
<div class="b4"><p>NO.4</p></div>
</body>
解释
对于定位元素,z-index 最高的数显 示在最上面,不管该元素 在 HTML 中出现的次序。 第一条规则为所有四个 div 设置了 position: absolute;,而定义 .NO3 时又覆盖了这一规则, 让 .NO3回到默认的 static。因此,尽管它的 z-index 值最高,但这没有任何效果,它总是位于 最底层。
z-index 的值越大,元素在堆中就越 高。
定位的盒子按照 z-index 由高到低的 次序进行叠放。第三个盒子位于最底层,因为它处 于常规的文档流。
注意:
z-index 属性仅对定位过的元素(即 设为绝对定位、相对定位或固定定位的元 素)有效。若仅包含绝对定位的元 素,但实际上可以对绝对定位、相对定位和 固定定位的元素混合使用 z-index,z-index 会将它们作为整体进行安排,而不是分别 安排。
有坑勿踏
自己走过的坑:设了Z-index,但是没有效果!调整了很久发现是父标签的问题。父标签 position属性为relative,改为position:absolute后就解决了!