0
동일한 Z- 인덱스를 가진 dom의 동일한 레벨에 두 개의 외부 div 컨테이너가 있지만 첫 번째 컨테이너는 두 번째 컨테이너와 중첩됩니다. 이것은 IE11, Edge, Chrome 및 Firefox의 ok에서만 발생합니다.인터넷 익스플로러 11 zindex html/css 버그
해결 방법을 제안 할 수 있습니까?
두 번째 상자의 zindex를 더 높게 설정하더라도 두 번째 상자를 겹쳐서 첫 번째 상자의 요소를 가져옵니다. 즉 "탭"요소 만 있습니다. 당신은 전체 페이지를 이동 한 다음에 창 크기를 조정해야 할 수도 있습니다 : 여기 https://jsfiddle.net/paull3876/3cobnxz7/2/
당신은 문제를
/*---------------------------------------------------*/
/* 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>편집을 repro 수에 IE를해야 바이올린이있다
쿼리 디자이너 탭이 메시지 div와 겹쳐서 표시되는지 확인하십시오.
EDIT2 : 나는 바이올린을 저장하는 것을 잊었다 그래서 그냥/2
이 확인인가에
z-index를 추가하는 것을 잊었다에 대한 링크를 변경? https://jsfiddle.net/3cobnxz7/3/ –예, 작동하는 것 같습니다. 무엇을 했습니까? (좋아, 나는 windiff를 가지고있다!) – user2728841
ok 이것은 거의 끝내지 만, "대화 아래에"전체가 아래에 나타나지 않는 등의 문제를 전달했다. 반면에 받아 들여진 대답은 실제로 그것을 완전히 풀어 준다. 여전히 시도해 주셔서 감사한다. :) – user2728841