Ошибка Internet Explorer 11 zindex html / css

ProgramBox

Ошибка Internet Explorer 11 zindex html / css

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#html #css #z-index #internet-explorer-11

#HTML #css #z-индекс #internet-explorer-11

Вопрос:

У меня есть два внешних контейнера div на одном уровне в dom с одинаковым z-индексом, но первый контейнер перекрывает второй. Это происходит только в 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>

редактировать: возможно, вам потребуется перейти на всю страницу, а затем изменить размер окна, чтобы увидеть, что вкладка «Конструктор запросов» перекрывает раздел сообщений.

правка 2: я забыл сохранить скрипку, поэтому просто изменил ссылку на / 2

1. Это нормально? jsfiddle.net/3cobnxz7/3

2. Да, кажется, это работает, что вы сделали? (хорошо, у меня есть windiff !)

3. хорошо, это было близко, но оно передало проблему таким образом, что весь «нижний диалог» не был скрыт, тогда как принятый ответ ниже фактически решает ее полностью, все равно спасибо за попытку 🙂

4. Следует отметить, что в правилах .tabs [type=radio]:checked ~ label и .tabs [type=radio]:checked ~ label ~ .content есть, z-index но отсутствуют position ошибки, которые им необходимы для z-index работы

5. Спасибо, LGSon, казалось, что это работает без этого, но я явно добавлю унаследованные позиции независимо от этого для будущей проверки.

Ответ №1:

Вы забыли добавить z-index в класс .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>

1. Да, похоже, это исправлено. И я только что понял, что вы были тем же человеком, который прокомментировал исходное сообщение 🙂 .. спасибо. Теперь я переместил ваш z-индекс в диалоговое окно, он отлично работает во всей системе. еще раз спасибо