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; }
aa
建立了一个层叠上下文, 这个层叠上下文包括bb
和cc
.bb
和cc
的z-index
相同, 因此根据其代码顺序,cc
叠于bb
之上. 而bb
和cc
本身也建立层叠上下文,dd
处在bb
的层叠上下文中, 由于bb
本身已经被cc
盖住了, 因此dd
的z-index
不会和cc
比, 只能和bb
内部的其他元素比.一周热门 更多>