0
我有两个外部div容器在dom中具有相同z-index的同一级别，但第一个容器与第二个容器重叠。这只发生在IE11中，在Edge，Chrome和Firefox中可以使用。Internet Explorer 11 zindex html/css bug
任何人都可以提出一种解决方法吗？
即使当我在第二个箱子中将zindex设置为更高的数量时，我仍然会在第一个箱子中重叠第二个箱子中的元素，就是那个“tab”元素。
这里有https://jsfiddle.net/paull3876/3cobnxz7/2/
你需要IE浏览器瑞普问题
/*---------------------------------------------------*/
/* 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>编辑小提琴：你可能需要去整页，然后调整窗口请参阅“查询设计器”选项卡与消息div重叠。
EDIT2：我忘了保存小提琴所以只是改变了链接到/ 2
这是正确的添加
z-index？ https://jsfiddle.net/3cobnxz7/3/ –是的，似乎工作，你做了什么？ （好吧，我有windiff！） – user2728841
好吧，这很接近，但它转移了这个问题，使得整个“底下的对话”没有隐藏，而下面接受的答案实际上完全解决了它，仍然感谢尝试:) – user2728841