IE6/IE7 中的 Z-index 错误答案

【问题标题】：Z-index bug in IE6/IE7IE6/IE7 中的 Z-index 错误
【发布时间】：2010-06-17 05:54:18
【问题描述】：

看看下面的网站：http://driz.co.uk/mars/index.html

如果您查看 IE6/IE7 右下角的 jQuery 滑块，您会注意到橙色箭头出现在白色渐变叠加层的后面，即使箭头的 z-index 设置为高于覆盖。

它在我测试过的所有其他浏览器中都能正常工作，包括 IE8，只有 7 和 6 显示索引错误。有任何想法吗？需要尽快完成这个项目。谢谢。

【问题讨论】：

从我在您的代码中看到的情况来看，您似乎只在箭头 div 上而不是在照片滑块上设置了 z-index。尝试这样做。
我在覆盖层上有索引和箭头，所以箭头应该出现在覆盖层上方（它们在 IE8、Chrome 等中）
我将 z-index 添加到滑块中，它现在在所有浏览器中都会破坏它...

标签： css

【解决方案1】：

这是一个记录在案的 IE6 错误。 Quarksmode.org 上有一篇文章。 http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

上面的文章没有包含解决方法，但是在 cmets 中，一位同事提到，给父元素一个更高的 z-index 实际修复了这个错误。不要问我为什么这样有效，但它确实有效！

<div style="z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />

【讨论】：