Why is zIndex not working from IE/Javascript?_问答_开发者

Why is zIndex not working from IE/Javascript?

开发者 https://www.devze.com 2023-01-01 14:36 出处：网络

<!DOCTYPE html PUBLIC开发者_如何学C \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<!DOCTYPE html PUBLIC开发者_如何学C "-//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>

In a nutshell, this script has two DIV elements with position:relative and the first of them has a third DIV with position:absolute in it. It's all set to run on IE-7 standards mode (I'm targeting IE7 and above).

I know about the separate z-stacks of IE, so by default the third DIV should be beneath the second DIV. To fix this problem there is some Javascript which sets the z-orders of first and third DIV to 1000, and the z-order of the second DIV to 999.

Unfortunately this does not help. If the z-indexes were set in markup, this would work, but why not from JS?

Note: This problem does not exist in IE8 standards mode, but I'm targetting IE7, so I can't rely on that. Also, if you save this to your hard drive and then open it up, at first IE complains something about ActiveX and stuff. After you wave it away, everything works as expected. But if you refresh the page, the problem is there again.

Added: Actually, you can reduce it even further to just

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

And the problem is still there.

Not sure from what you stated that you already know this but IE7 generates a new stacking context on positioned elements so z-index doesn't work as it should in IE<8. I don't recall the fix, and I'm not sure it applies here, but Google around for that.

This appears to be a helpful article.

div2 is absolute within a relative element, that relative element div1 has the same zIndex as the relative div3 element. I think that IE might pick the relative zIndex of div1 (and the fact that it comes before div3) to help put the absolute element over div3, simply because div1 is "higher" than div3..

I don't have IE7 at hand to actually test your code right now, but maybe if you try with easier zIndex values, and all different? Like "100, 200, 300" for div1, etc. (respectively), that way div3 should be above div1, thus div2.

god that sounds like a load of gibberish when I read it back, but hopefully it helps

(added, from my comment below) change the overflow value of those 3 div elements to visible and it works. It sounds strange, but that's IE; strange.