Databases
StackOverflow2013
Postsdbo
POWhy is zIndex not working from IE/Javascript?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is zIndex not working from IE/Javascript?
    text
    copied!<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt; &lt;title&gt;Problem demo&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="background:red; position:relative;" id='div1'&gt;1. &lt;div style="background:lime; position: absolute; width: 300px;height: 300px; top: 3px; left: 30px" id="div3"&gt;3.&lt;/div&gt; &lt;/div&gt; &lt;div style="background:blue;position:relative;color: white" id="div2"&gt;2.&lt;/div&gt; &lt;script type="text/javascript"&gt;/*&lt;![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; } /*]]&gt;*/&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>In a nutshell, this script has two <code>DIV</code> elements with <code>position:relative</code> and the first of them has a third <code>DIV</code> with <code>position:absolute</code> in it. It's all set to run on IE-7 standards mode (I'm targeting IE7 and above).</p> <p>I know about the separate z-stacks of IE, so by default the third <code>DIV</code> should be beneath the second <code>DIV</code>. To fix this problem there is some Javascript which sets the z-orders of first and third <code>DIV</code> to 1000, and the z-order of the second <code>DIV</code> to 999.</p> <p>Unfortunately this does not help. If the z-indexes were set in markup, this would work, but why not from JS?</p> <p><strong>Note:</strong> 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.</p> <p><strong>Added:</strong> Actually, you can reduce it even further to just</p> <pre><code>window.onload= function() { document.getElementById('div1').style.zIndex = 800; } </code></pre> <p>And the problem is still there.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload