Z-индекс относительный или абсолютный? - PullRequest
Новая
       30

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

36 голосов
/ 20 сентября 2011

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

Является ли стиль 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>

Какой будет впереди - #dHello или #dDomination?

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

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

Спасибо!

Ответы [ 4 ]

64 голосов
/ 20 сентября 2011

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, потому что z-index из 3 явно выше, чем 2. Ну, Вы ошибаетесь: #Y - это потомок от #X, с z-index из 1. Два выше единицы, поэтому #Z будет отображаться над #X (и #Y).

Вот плункер, чтобы визуализировать это немного лучше , или попробуйте фрагмент ниже 

.redbox,
.greenbox,
.bluebox {
  height: 100px;
  width: 100px;
  position: relative;
  color: #fff;
  padding: 3px;
}

.redbox {
  background: red;
  z-index: 1;
}

.greenbox {
  background: green;
  top: 40px;
  left: 40px;
  z-index: 3;
}

.bluebox {
  background: blue;
  top: -20px;
  left: 20px;
  z-index: 2;
}
<div id=X class='redbox'>z: 1
  <div id=Y class='greenbox'> z: 3</div>
</div>
<div id=Z class='bluebox'>z: 2</div>
8 голосов
/ 20 сентября 2011

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

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

Думаю, все браузеры справляются с этим одинаково.

0 голосов
/ 26 октября 2013

Например: 

  <!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>
0 голосов
/ 20 сентября 2011

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

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

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

Похоже, это означает, что ничто не может быть нарисовано между div с z-index: -100 и div с z-index: 200.

...