Z-index，彼此叠加的块，最重要的是这些块中的引用

Question

<style>
a { position:absolute; top:20px; color:#0F0; z-index:5; }
div { position:absolute; top:0; left:0; width:100%; height:50px; background:#066; }
.a { z-index:4; }
.b { z-index:3; }
.c { z-index:2; }
.d { z-index:1; }
.a a { left:10px; }
.b a { left:50px; }
.c a { left:100px; }
.d a { left:150px; }
</style>

<div class="a"><a href="#" title="">123</a></div>
<div class="b"><a href="#" title="">123</a></div>
<div class="c"><a href="#" title="">123</a></div>
<div class="d"><a href="#" title="">123</a></div>

只希望所有链接都在块上的一件事。在ie7中它起作用了。

帮忙。

Answer 1

互联网浏览器会导致许多错误。其他浏览器如safari，firefox和chrome都能正确完成。

position:absolute;表示top和left是绝对的，也就是说，根据文档的边界。你强迫所有元素都打印在同一个位置！

Answer 2

IE 7 doesn't use Z-index correctly

基本上。没有惊喜。

更清楚：

  

当你向一个元素添加css定位并给它一个z-index（auto除外）时，它会在新的上下文中创建新的堆叠上下文和新的堆叠级别。

请参阅：Z-index and the CSS Stack

因此，您的堆叠div被定位并且z-indexed都有自己的堆叠上下文，因此只显示最上面的div。