一个绝对定位元素为和不能覆盖与其父元素同级的绝对定位元素? 财富值21

2016-10-13 20:48发布

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; }
3条回答

aa 建立了一个层叠上下文, 这个层叠上下文包括 bbcc. bbccz-index 相同, 因此根据其代码顺序, cc 叠于 bb 之上. 而 bbcc 本身也建立层叠上下文, dd 处在 bb 的层叠上下文中, 由于 bb 本身已经被 cc 盖住了, 因此 ddz-index 不会和 cc 比, 只能和 bb 内部的其他元素比.

一周热门 更多>