Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>Problem demo</title>
    </head>
    <body>
        <div style="background:red; position:relative;" id='div1'>1.
            <div style="background:lime; position: absolute; width: 300px;height: 300px; top: 3px; left: 30px" id="div3">3.</div>
        </div>
        <div style="background:blue;position:relative;color: white" id="div2">2.</div>
        <script type="text/javascript">/*<![CDATA[*/
            window.onload= function()
            {
                // The container of the absolute DIV
                document.getElementById('div1').style.zIndex = 800;

                // The lowest DIV of all which obscures the absolute DIV
                document.getElementById('div2').style.zIndex = 1;

                // The absolute DIV
                document.getElementById('div3').style.zIndex = 1000;
            }
        /*]]>*/</script>
    </body>
</html>

简而言之，此脚本包含两个DIV元素position:relative，其中第一个元素中包含第三个DIV position:absolute。它全部设置为在IE-7标准模式下运行（我的目标是IE7及以上版本）。

我知道IE的单独z-stack，所以默认情况下，第三个DIV应该在第二个DIV之下。要解决此问题，可以使用一些Javascript将第一个和第三个DIV的z顺序设置为1000，将第二个DIV的z顺序设置为999。

不幸的是，这没有用。如果在标记中设置z索引，这可行，但为什么不从JS？

注意： IE8标准模式下不存在此问题，但我的目标是IE7，所以我不能依赖它。此外，如果您将其保存到您的硬盘驱动器然后打开它，首先IE抱怨一些关于ActiveX和东西。挥手之后，一切都按预期工作。但是如果你刷新页面，问题就出现了。

已添加：实际上，您可以将其进一步减少到

window.onload= function()
{
    document.getElementById('div1').style.zIndex = 800;
}

问题仍然存在。

Answer 1

div2 在absolute元素中为relative，相对元素 div1 与相对 div3具有相同的zIndex 元素。我认为IE可能会选择 div1 的相对zIndex（以及它出现在 div3 之前的事实）来帮助将absolute元素放在 div3上，只是因为 div1 比 div3 “更高”..

我现在没有IE7来实际测试您的代码，但是如果您尝试使用更简单的zIndex值，并且所有不同的话？像div1等的“100,200,300”（分别）， div3 应该高于 div1 ，因此 div2 。

上帝，当我读回它时听起来像是一堆乱语，但希望它有所帮助

（从我在下面的评论中添加）将这3个div元素的overflow值更改为visible并且它可以正常工作。这听起来很奇怪，但那是IE;奇怪。

Answer 2

不确定你说过你已经知道这个，但IE7会在定位元素上生成一个新的堆叠上下文，因此z-index在IE＆lt; 8中不能正常工作。我不记得修复了，我不确定它是否适用于此，但Google也是如此。

This appears to be a helpful article.

为什么z Index无法使用IE / Javascript？

2 个答案: