Internet Explorer 11 zindex html/css bug

Question

I have two outer div containers at the same level in the dom with the same z-index, but the first container overlaps the second. This only happens in IE11, its ok in Edge, Chrome and Firefox.

Can anyone suggest a workaround ?

Even when I set zindex in the second box to a higher amount, I still get the elements in the first box overlapping the second box, just the "tab" elements that is.

There's a fiddle here https://jsfiddle.net/paull3876/3cobnxz7/2/

You'll need IE to repro the problem

 /*---------------------------------------------------*/ /* 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; } .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> 

edit: you might need to go full page and then resize the window to see that the "Query Designer" tab overlaps the message div.

edit2: I forgot to save the fiddle so just changed the link to /2

Answer 1

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>