Internet Explorer Z-Index Bug

Order in Internet Explorer

It looks like you might be dealing with a known bug:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.”

You can see the bug report on Quirksmode website and a workaround explained in this blog post.

Essentially what you have to do is wrap it in an element with higher Z-index, for example
Here is a quick sketch of a workaround:

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        ...
    </div>
</div>

Z-index does not work in ie

If you have a full page wrapper div anywhere or can make one or there is an ancestor/parent div you can freely alter,...

Explicitly state position: relative; or position: absolute; and either way also set z-index: 0; or the lowest value you can use.

Also some browsers (especially some IEs) allow a smaller range of z-index.

For sure values between 1 and 100 are safe. Probably more like 1-255 but I vaguely recall some old issue,...

Internet Explorer 11 zindex html/css bug

You forgot to add a z-index in the class .dialogveil

/*---------------------------------------------------*//* Dialog Box CSS *//*---------------------------------------------------*/
.dialogveil{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color: rgb(100, 100, 100);       /* for old browsers */background-color: rgba(100, 100, 100, 0.7);display:none;z-index : 1;}
.dialogcentre {                             /*  exists only to center the div  */position:relative;vertical-align:middle;text-align:center;top: 50%;left: 50%;max-width:100%;                             /* stops negative coords on small window */max-height:100%;min-width:300px;transform: translate(-50%, -50%);display:inline-block;}
.dialogbox{background-color: rgb(255, 255, 255);background-color: rgba(255, 255, 255, 1);border: 1px solid #111111;box-shadow: 2px 2px 40px #222222;vertical-align: top;                    /* correcting the alignments set from parent div above */text-align:left;}
.dialogheader{background-color: rgb(239, 239, 239);background-color: rgba(239, 239, 239, 1);border-bottom: 1px solid #111111;height:24px;cursor:default;}
.popover .dialogheader {border-bottom: 1px solid #aaaaaa;}
.dialogheadertitle{color:#bb2200;height:24px;text-align:left;vertical-align:middle;padding: 4px 0px 0px 14px;font-size:9pt;font-weight:bold;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dialogheaderrightside {float:right;height:21px;display:inline-block;}.dialogheadericons {background-image:url("/images/hamburger.gif");background-repeat:no-repeat;width:47px;height:21px;cursor:pointer;display:inline-block;padding-right:5px;padding-top: 2px;}
.dialogheaderclose{background-image:url("/images/closev7.jpg");background-repeat:no-repeat;width:47px;height:21px;cursor:pointer;background-color:Red;display:inline-block;}
.dialogbody{background-color: rgb(255, 255, 255);background-color: rgba(255, 255, 255, 1);padding:10px 10px 10px 10px;        /* all except popup */}
/*---------------------------------------------------*//* End Dialog Box CSS *//*---------------------------------------------------*/


/*---------------------------------------------------*//* Tabs *//*---------------------------------------------------*/

.tabs {position: relative;   min-height: 200px;    /* override this in the form's css */clear: both;margin: 25px 0;}.tabs .tab {float: left;}.tabs .tab label {background: #eee; padding: 5px 15px 5px 15px; border: 1px solid #ccc; position: relative;left: 1px; cursor: pointer;}.tabs .tab [type=radio] {display: none;   }.tabs .content {position: absolute;top: 18px;left: 0;background: white;right: 0;bottom: 0;padding: 20px;border: 1px solid #ccc; overflow:auto;}.tabs [type=radio]:checked ~ label {background: white;border-bottom: 1px solid white;z-index: 2;}.tabs [type=radio]:checked ~ label ~ .content {z-index: 1;}/*---------------------------------------------------*//* END Tabs *//*---------------------------------------------------*/

  <div class="dialogveil" style="display: block;">    <div class="dialog dialogcentre dragparent" style="left: 559px; top: 196.5px; position: absolute; min-width: 800px; transform: none;">      <div class="dialogbox" id="dlg389ca753-2181-4698-b0ea-a50e133f0d92" style="width: 800px; height: 600px;">        <div class="dialogheader draggabledialog">        </div>        <div class="dialogbody">          <div class="form formsystemeditquery" id="systemeditquery-d3367c9349b74213b82dc30d4cee5f23" data-avname="System Edit Query" data-avid="869" data-form="system edit query" data-src="System Edit Query">            <div class="databox inlineblock" id="c-querysubform" data-fld="querysubform">            </div>            <div class="tabs">              <div class="tab">                <input name="tab-group-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" id="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" type="radio" checked="checked">                <label for="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23">Query Designer</label>                <div class="content">                  <div id="c-QueryDesigner">                    <div class="databox" id="c-QueryColumns" data-fld="querydesignersubform">                      <div class="xa xafield xaform" id="querydesignersubform">                        <div class="xainner xavtext bind xainnersubform " id="querydesignersubform-inner" style="width: 780px; -ms-overflow-x: hidden;">                        </div>                      </div>                    </div>                  </div>                </div>              </div>              <div class="tab">                <input name="tab-group-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" id="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23" type="radio">                <label for="tab-1-systemeditquery-d3367c9349b74213b82dc30d4cee5f23">Tab Two</label>                <div class="content">                </div>              </div>            </div>          </div>        </div>      </div>    </div>  </div>
  <div class="dialogveil" style="display: block;">    <div class="dialog dialogcentre dragparent">      <div class="dialogbox" id="dlg75971d36-e97c-4394-ae76-91ca900a83ea">        <div class="dialogheader draggabledialog">          <div class="dialogheadertitle">Message</div>          <div class="dialogheaderrightside">            <div class="dialogheadericons"></div>            <div title="Close this Window" class="dialogheaderclose"></div>          </div>        </div>        <div class="dialogbody">          <div class="divalert">            <div class="inlineblock divdialogicon"></div>            <div class="inlineblock divalertbody">dirty:true</div>          </div>          <button class="dialogbutton xaenterkeybutton" id="ok" type="button">OK</button>        </div>      </div>    </div>  </div>

z-index does not work in Internet Explorer with pdf in iframe

Update: Matthew Wise has a really clever alternative solution which you should consider—especially if you're having trouble with my approach or dislike ugly hacks!

There is a way to cover windowed elements in IE with other elements, but you're not going to like it.

Background: windowed and windowless elements

Legacy IE categorises elements into two types: windowed and windowless.

Regular elements like div and input are windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.

Elements rendered outside of MSHTML are windowed; for example, select (rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.

The only exception is iframe. In IE 5, iframe was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index

In other words: iframe respects z-index for both windowed and windowless elements. If you position an iframe over a windowed element, any windowless elements positioned over the iframe will be visible!

What this means

The PDF will always be painted on top of the regular page content—like select elements were until IE 7. The fix is to position another iframe between your content and the PDF.

Demo

jsFiddle: http://jsfiddle.net/Jordan/gDuCE/

Code

HTML:

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

CSS:

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

Support

This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

z-index issue in Internet explorer 7

z-index only work with position relative, absolute & fixed. So, Give position:relative to your #submenu. Write like this:

#sub-menu {
 position:relative;
 z-index: 1000;
}