Я пытаюсь понять, почему дочерний элемент не появляется за его родительским элементом при задании более низкого значения z-индекса, чем родительский. Он работает только в том случае, если вы не касаетесь родительского значения z-индекса по умолчанию.
Вот основной пример.
HTML:
<div class="a">
A DIV
<div class="b">
B DIV
</div>
</div>
CSS:
.a {
position: relative;
background: #eaeaea;
height: 200px;
width: 200px;
z-index: 20;
}
.b {
position: relative;
z-index: -20;
background: #d6d6d6;
height: 100px;
width: 100px;
}
Ссылка на пример: http://jsfiddle.net/V4786/2/
Любые мысли были бы оценены.
Он работает только в том случае, если вы не касаетесь родительского значения z-индекса по умолчанию.
Это связано с тем, что установка z-index
на что-то другое, кроме auto
по умолчанию на позиционированном элементе, заставляет его установить новый контекст стекирования, и элемент не может быть расположен за элементом, который создал контекст стекирования, в котором он находится. (Элемент не может быть расположенный за корневым контекстом укладки, например, как утверждает Скотти С.)
Когда вы оставляете z-index
родительского элемента нетронутым, родительский и дочерний участвуют в одном и том же контексте стекирования, который установлен в корневом элементе, или в контексте корневого стека. Вот почему вы можете разместить ребенка за родителем в таком случае.
Все детали можно найти в спецификации, но суть этого дала ваш вопрос.
Потому что уровни Z-Index относятся к их родителям. Это то же самое, что сказать: "Почему элемент не отображается за окном браузера, если я устанавливаю отрицательный Z-индекс?" Как правило, если вы собираетесь делать что-то напуганное с уровнями, вы можете подумать о наличии двух элементов-братьев с абсолютным или относительным позиционированием. Хотя этот подход иногда считается "хаки".
z-index
сложены ... см. Как изменить порядок вложенных дочерних элементов