Fatal编程技术网
  • javascript/
  • 为什么zIndex不能从IE/Javascript工作？

为什么zIndex不能从IE/Javascript工作？

javascript internet-explorer

为什么zIndex不能从IE/Javascript工作？,javascript,internet-explorer,z-index,Javascript,Internet Explorer,Z Index,问题仍然存在。div2是相对元素中的绝对，相对元素div1与相对div3元素具有相同的zIndex。我认为IE可能会选择div1的相对zIndex（以及它位于div3之前的事实）来帮助将绝对元素置于div3之上，因为div1比div3更高 我手头没有IE7来测试你的代码，但是如果你试着使用更简单的zIndex值，或者所有不同的值？像div1的“100、200、300”等（分别），那样div3应该高于div1，因此div2 上帝啊，当我回过头来读的时候，这听起来像是胡言乱语，但希望能有所帮助 （在

问题仍然存在。

div2是
相对
元素中的
绝对
，相对元素div1与相对div3元素具有相同的zIndex。我认为IE可能会选择div1的相对zIndex（以及它位于div3之前的事实）来帮助将
绝对
元素置于div3之上，因为div1比div3更高

我手头没有IE7来测试你的代码，但是如果你试着使用更简单的zIndex值，或者所有不同的值？像div1的“100、200、300”等（分别），那样div3应该高于div1，因此div2

上帝啊，当我回过头来读的时候，这听起来像是胡言乱语，但希望能有所帮助


（在我下面的评论中添加）将这3个div元素的
溢出
值更改为
可见
，它就可以工作了。这听起来很奇怪，但这就是IE；奇怪。
根据您所说的，您不确定您已经知道这一点，但IE7在定位元素上生成了一个新的堆叠上下文，因此z索引在IE7中无法正常工作。我认为您混淆了编号。：）div1和div2是相对的；div3是绝对值，在div1.Sh*t内。修理！：好了，应该可以了。这就是我的意思。好吧，如果在我进入IE7测试机之前没有人解决它，我会再尝试一次。如果这不起作用，我现在没有办法了。@Vilx在设置zIndex之前，用Javascript将所有3个div的“overflow”设置为可见。（补充）这听起来很傻，但嘿，这是我们正在谈论的IE。它似乎在我基于您的代码的小测试用例中工作。事实上，我发现设置
zoom:1
也有帮助，即使是通过CSS而不是Javascript完成的。我怀疑这与臭名昭著的
hasLayout
有关，即“ActiveX和其他东西”投诉（信息栏）意味着您的JavaScript代码也没有运行。因此，如果你期待它，那就是你的问题所在。@EricLaw-我没有那么愚蠢。让我重新措辞。当IE提示
帮助保护您的安全时，Internet Explorer已限制此网页运行可访问您计算机的脚本或ActiveX控件。单击此处查看选项…
，您应该单击它并选择
允许阻止的内容…
。之后，你应该刷新页面（不会再次提示），错误将被观察到。不，情况并非如此。我已经说过我知道这一点，上面的例子也应该考虑到这一点。

<!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>



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