Z-индекс Относительный или Абсолютный?

Я пытаюсь найти ответ на следующий вопрос:

Является ли элемент z-index его абсолютным порядком стека или его порядком стека относительно его родителя?

Например, предположим, что у меня есть следующий код:

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

Какой из них будет впереди - #dello или #dDomination?

Это просто для примера. Я пробовал это в разных местах, и результаты, похоже, меняются. Я вижу, знает ли кто-нибудь авторитетного источника для урегулирования:

1) Каковы фактические стандарты в отношении z-индекса (по этой теме конкретно)? 2) Как отдельные браузеры различаются в своей фактической реализации?

Спасибо!

Ответы

Ответ 1

z-index является относительным. См. Подробный ответ , который я написал для аналогичного вопроса.

Если ни один из других элементов не имеет определенного z-index, используя z-index: 1 будет в порядке.

Модель: как определяется z-индекс?

                                         z-index
<div id=A>                                Auto 1
    <div id=B>                            Auto 1.1
       <div id=C style="z-index:1"></div>          Manual 1
       <div id=D></div>                   Auto 1.1.2
    </div>                                
    <div id=E></div>                      Auto 1.2
</div>
<div id=F></div>                          Auto 2

Во-первых, прямой проходят дочерние узлы тела. Два элемента: столкнулись: #A и #F. Им присваивается z-индекс 1 и 2. Это шаг повторяется для каждого (дочернего) элемента в документе.

Затем проверяются вручную установленные свойства z-index. Если два z-index значения равны, их позиция в дереве документов по сравнению.

Ваш случай:

<div id=X style="z-index:1">          Z-index 1
    <div id=Y style="z-index:3"></div> Z-index 3
</div>
<div id=Z style="z-index:2"></div>    Z-index 2

Вы ожидаете, что #Y перекрытие #Z, потому что a z-index of 3 явно выше 2. Ну, вы ошибаетесь: #Y - ребенок #X, с z-index от 1. Два выше одного, и, следовательно, #Z будет отображаться над #X (и #Y).

Вот плункер, чтобы визуализировать это немного лучше: http://plnkr.co/edit/CCO4W0NS3XTPsVL9Bqgs?p=preview

Ответ 2

Afaik, z-index не работает, если этот элемент не установлен на position: relative; Если у этого же элемента был дочерний элемент с position: relative;, а z-index был установлен выше, ребенок показывал бы поверх своего родителя.

Таким образом, он имеет элементы как "абсолютного", так и "относительного" порядка стека, как вы его сформулировали.

Все браузеры в значительной степени справляются с этим, я думаю.

Ответ 3

Вот спецификация W3C для z-index.

Я думаю, что самая важная строка, основанная на вашем вопросе, такова:

Порядок рисования дерева рендеринга на холсте описанных в терминах контекстов укладки. Контексты стеков могут содержать дополнительные контексты стекирования. Контекст стекирования является атомарным из точки представления его родительского стекового контекста; коробки в другой укладке контексты могут не пересекаться ни с одним из его полей.

Это указывает на то, что между div с z-index: -100 и div с z-index: 200 ничего не может быть сделано.

Ответ 4

Например:

  <!DOCTYPE html>
<html>
<head>
<style>

.x1 {
    position:relative;
    width:100%;
    clear:both;
    display:block;
  z-index:1000;
}

.x2 {
    position:fixed;
    width:100%;
    height:50px;
    background-color:#ff0000;
}

.x3 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#888;
}
.x4 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}
.x5 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#ff00ff;
}
.x6 {
    position:relative;
    height:250px;
    width:600px;
    background-color:#0000ff;
}

</style>

</head>
<body>
<div class='x1'>this class is relative
<div class='x2'>this class is fixed</div>
</div>

<div class='x3'>x3: this class is relative</div>
<div class='x4'>x4: this class is relative</div>
<div class='x5'>x5: this class is relative</div>
<div class='x6'>x6: this class is relative</div>
<div class='x3'>x3: this class is relative</div>

</body>
</html>