Why is zIndex not working from IE/Javascript?
Posted
by Vilx-
on Stack Overflow
See other posts from Stack Overflow
or by Vilx-
Published on 2010-06-01T15:23:26Z
Indexed on
2010/06/01
15:33 UTC
Read the original article
Hit count: 317
<!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.
© Stack Overflow or respective owner
