Z-Index Ie Bug Fix

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 chrome bug

one800higgins's answer is along the right lines. The real answer is that on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto. So the stacking context hierarchy looks like this:

document root (z-index 0)
- #mask (z-index 9998)
- #box (z-index 0)
  - .above-mask (z-index 9999)
  - .below-mask (z-index 9997)

That means that 9998 is never compared with 9999 or 9997 to determine stacking order. Instead, 9999 is compared with 9997 to determine which of .above-mask and .below-mask is further in front, and then once everything inside #box is stacked in that context, it's treated as a single layer at z-index 0 which gets stacked behind #mask at z-index 9998.

This also explains why @TheNextBillGates's answer of moving #mask inside #box works - because then #mask is in the same stacking context as .above-mask and .below-mask. I highly recommend the above link for more comprehensive details, and you should also see the announcement for the stacking change for fixed elements in Chrome.

Chrome Css bug with Z-index

You have to add

z-index: 1000; /* or whatever value works*/
position: relative;

to your #big-map. This will fix it. You forgot to add a position to that div, which makes that a z-index doesn't get applied.

The CSS of #big-map should look like this:

#big-map {
  width: 100%;
  height: auto;
  /* background-color: rgb(229, 227, 223); */
  /* background-color: #E0E0E0; */
  -webkit-transform: translateZ(0);
  display: block;
  z-index: 1000;
  position: relative;
}

I agree with Toni Leigh though: in the future you need to share code and a working example, so this question is also value in the future. If you can't share code or set up an example with a minimum amount of code, you can always ask it in the chat, where we gladly help you with such "bugs".

z-index not working with fixed positioning

This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.

Solutions

The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order

The stacking context’s root element (the <html> element in this case)

Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Non-positioned elements (ordered by appearance in the HTML)

Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)

Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

So you can

set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
set the position of #over to relative so that rule 5 applies to it

The Real Problem

Developers should know the following before trying to change the stacking order of elements.

When a stacking context is formed
- By default, the <html> element is the root element and is the first stacking context
Stacking order within a stacking context

The Stacking order and stacking context rules below are from this link

When a stacking context is formed

When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Stacking Order within a Stacking Context

The order of elements:

The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)
- You cannot put a child element behind a root stacking context element
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Non-positioned elements (ordered by appearance in the HTML)
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

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 IE bug fix?

If you mean the problem of IE6 not respecting the z-index on select controls, then yes.

There is also a few others. I think the best method is to inform the users that IE6 has been replaced and that they would be better off using IE7, FF, or another recent browser verison, or direct them to the MS article explaining the problem and their courses of action.

You may not have this luxury, in which case, you should try using the select free or a few others that turn up in google results. It sucks, but you will have to try one of them.

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,...