Why is zIndex not working from IE/Javascript?
- by Vilx-
<!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="div2">3.</div>
</div>
<div style="background:blue;position:relative;color: white" id="div3">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.
