【发布时间】：2016-10-24 23:24:34
【问题描述】：
我在 dom 中有两个位于同一级别的外部 div 容器，具有相同的 z-index，但第一个容器与第二个容器重叠。这只发生在 IE11 中，在 Edge、Chrome 和 Firefox 中都可以。
任何人都可以提出解决方法吗？
即使我将第二个框中的 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
【问题讨论】：
-
这样可以吗？ jsfiddle.net/3cobnxz7/3
-
是的，这似乎有效，你做了什么？ （好吧，我有风！）
-
好的，这很接近，但它转移了问题，使得整个“下面的对话框”没有被掩盖，而下面接受的答案实际上完全解决了它，仍然感谢您的尝试:)
-
需要注意的是，
.tabs [type=radio]:checked ~ label和.tabs [type=radio]:checked ~ label ~ .content规则有z-index但错过了position，它们需要z-index才能工作 -
感谢 LGSon，没有它似乎可以工作，但我会明确添加继承的位置，无论将来打样。
标签： html css z-index internet-explorer-11