css - 一个绝对定位元素为和不能覆盖与其父元素同级的绝对定位元素?
本文介绍了css - 一个绝对定位元素为和不能覆盖与其父元素同级的绝对定位元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
dd元素的z-index最高,但是不能覆盖#CC元素。
HTML:
<div id="aa">
<div id="bb">
<div id="dd"></div></div>
<div id="cc"></div>
</div>
CSS:
#aa{
position: absolute;
width: 100px;
height: 100px;
background-color: #ddd;
z-index: 1;
}
#bb{
position: absolute;
width: 80px;
height: 100px;
background-color: #000;
z-index: 2;
}
#cc{
position: absolute;
width: 70px;
height: 10px;
bottom:0;
background-color: red;
z-index: 2;
}
#dd{
position: absolute;
width: 60px;
height: 2000px;
background-color: yellow;
z-index: 17;
}
解决方案
dd
和 cc
处在不同的层叠上下文.
aa
建立了一个层叠上下文, 这个层叠上下文包括 bb
和 cc
. bb
和 cc
的 z-index
相同, 因此根据其代码顺序, cc
叠于 bb
之上. 而 bb
和 cc
本身也建立层叠上下文, dd
处在 bb
的层叠上下文中, 由于 bb
本身已经被 cc
盖住了, 因此 dd
的 z-index
不会和 cc
比, 只能和 bb
内部的其他元素比.
总之, 层叠上下文是拼爹的, 而且老爹爱幼子.
这篇关于css - 一个绝对定位元素为和不能覆盖与其父元素同级的绝对定位元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文