原有一dom結(jié)構(gòu)如下：
<div class="box">
<div class="top">
</div>
<div class="bottom">
<ul>
<li>
<div class="cover"></div>
</li>
<li>
<div class="cover"></div>
</li>
</ul>
</div>
</div>
其css部分如下：
.top{
position: relative;
width: 100%;
height: 40px;
background-color: antiquewhite;
z-index: 1;
}
/*省略部分代碼*/
.bottom{
width: 100%;
height: 200px;
background-color: aliceblue
}
.bottom ul{
width: 100%;
height: 100%;
}
.bottom ul li{
position: relative;
width: 80%;
height: 30px;
margin-bottom: 2px;
}
.bottom ul li .cover{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: 3;
background-color: aquamarine;
}
原樣式
想在top中添加一個(gè)相對(duì)定位的ul迈着，如下：
<div class="top">
<ul>
<li></li>
<li></li>
</ul>
</div>
.top ul{
position: absolute;
width: 80%;
left: 20px;
top:10px;
z-index: 4;
}
.top ul li{
width: 80%;
height: 30px;
margin-bottom: 2px;
background-color: blueviolet;
}
期望是這個(gè)樣子的：
預(yù)期效果
然而得到的結(jié)果是這個(gè)樣子的：
開始結(jié)果
在瀏覽器中查看top中的ul的z-index值為4
`top`里的`ul`樣式
bottom中的cover的z-index值為3
`bottom`下的`cover`
當(dāng)元素之間重疊的時(shí)候久免，z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會(huì)覆蓋較小的一個(gè)谢揪。
按照上面的理論來說蕉陋，top的ul應(yīng)該顯示在上面，然后實(shí)際情況卻相反拨扶。甚至top的ul的z-index值設(shè)置成 999 還是依舊在下面凳鬓，那么問題出現(xiàn)在哪里呢？是否和其父元素的z-index值有關(guān)呢患民？
`top`
此處top的z-index值為1缩举，將其改為4，OK匹颤；將其改為3仅孩，則否。而無論怎么修改top中ul的z-index值都不會(huì)影響到結(jié)果印蓖。
此處可以將top和bottom下的cover看做是同一層級(jí)的比較辽慕，z-index值相同時(shí)，后面的覆蓋前面的赦肃；不同時(shí)溅蛉，值大的覆蓋值小的绞旅。
另一方面，將bottom設(shè)置成如下：
`bottom`
發(fā)現(xiàn)
top的ul依舊被bottom下的cover覆蓋温艇，無論cover的z-index值是否為-1。
由此可知：在同一個(gè)dom元素下（如這里的box）,兩個(gè)元素的z-index值的比較堕汞，實(shí)際是其設(shè)置了z-index值父元素的比較（或者說“僅拼爹”）勺爱。
