Относительный z-индекс? - PullRequest
Новая
       22

Относительный z-индекс?

2 голосов
/ 12 апреля 2011

У меня есть виджет «Диалог», который всплывает с z-индексом 100. Когда я создаю другое всплывающее окно (плавающий div), оно появляется под диалоговым виджетом, потому что я явно не установил z -индекс на новом всплывающем окне.

Структура выглядит примерно так: 

<div id="dialogbox" style="z-index: 100">
    <div>
        <div id="widgetThatCausesThePopup" />
    </div>
</div>
<div id="popupHiddenBehindTheDialog" />

Я использую GWT для генерации этого HTML. Между диалоговым окном и widgetThatCausesThePopup могут быть произвольные уровни вложенности, и фактический z-индекс также может быть произвольным.

Как я могу убедиться, что новый div будет отображаться перед диалоговым окном?

Ответы [ 3 ]

3 голосов
/ 12 апреля 2011

Если ваши новые диалоговые окна вставляются в DOM после предыдущих :

Вы можете установить z-index: 100 для всех диалоговых окон.Когда элементы с одинаковым z-index найдены, порядок в DOM определяет, что находится сверху.

1 голос
/ 12 апреля 2011

Естественным решением CSS является:

  • Убедитесь, что «диалоговое окно» получает контекст стекирования.Это можно сделать с помощью
    • , установив z-index в значение, отличное от auto,
    • и дополнительно position в relative, absolute или fixed.
  • Затем добавьте всплывающее окно в качестве дочернего в «диалоговое окно».Если это еще не так, вы всегда можете переместить его в DOM.

В этом случае ваше всплывающее окно вообще не нуждается в z-index.Это полностью исключает «ад z-index».

Пример: 

<!doctype html>
<html>
<head>
<style type="text/css">
    #dialogbox {
        width: 400px; height: 300px;
        top: 0; left: 0;
        background-color: red;
    }
    #popup {
        width: 500px; height: 200px;
        top: 0; left: 0;
        background-color: green;
    }
</style>
</head>

<body>
<div id="dialogbox" style="z-index: 100; position: absolute;">
    <div>
        <div id="widgetThatCausesThePopup" >
            <button>Show popup</button>
        </div>
    </div>
    <div id="popup" style="position: absolute;">
        <!-- Empty divs cause really weird problems. 
             Always make sure, that your divs aren't empty! -->
        &nbsp;
    </div>
</div>
</body>
</html>

Контекст стека даже позволяет использовать z-индексы относительно контекста, если они вам нужны (примечание, что дочерний порядок не имеет значения, и z-индексы не должны быть больше 100): 

<div id="dialogbox" style="z-index: 100; position: absolute;">
    <div id="popup" style="position: absolute; z-index: 2;">
        <!-- Empty divs cause really weird problems. 
             Always make sure, that your divs aren't empty! -->
        &nbsp;
    </div>
    <div>
        <div id="widgetThatCausesThePopup" style="position: absolute; z-index: 1;">
            <button>Show popup</button>
        </div>
    </div>
</div>
1 голос
/ 12 апреля 2011

Получить вычисленный z-индекс родителя (см. В GWT, как узнать все стили, примененные к данному элементу (по идентификатору или имени класса) ) и увеличить его для каждого дочернего элемента.

...