Почему дочерний элемент с меньшим z-индексом, чем его родители, отображается за родителем? [Дубликат]

Question

Почему дочерний элемент с меньшим z-индексом, чем его родители, отображается за родителем? [Дубликат]

0

Я пытаюсь понять, почему дочерний элемент не появляется за его родительским элементом при задании более низкого значения 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/

Любые мысли были бы оценены.

user12893298320392 12 нояб. 2013, в 04:50

Источник

0

Возможно, потому что если он находится внутри родительского элемента, он будет находиться в том же z-индексе, что и родительский. Это не должно быть в родительском элементе, чтобы быть на его собственном z-индексе.
John Conde 12 нояб. 2013, в 02:57
1

Значения z-index сложены ... см. Как изменить порядок вложенных дочерних элементов
Josh Crozier 12 нояб. 2013, в 03:02
1

то, что вы ищете, это stacking context developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
Lucky Soni 12 нояб. 2013, в 03:03

Показать ещё 1 комментарий

Теги:

html

css

z-index

2 ответа

1

Потому что уровни Z-Index относятся к их родителям. Это то же самое, что сказать: "Почему элемент не отображается за окном браузера, если я устанавливаю отрицательный Z-индекс?" Как правило, если вы собираетесь делать что-то напуганное с уровнями, вы можете подумать о наличии двух элементов-братьев с абсолютным или относительным позиционированием. Хотя этот подход иногда считается "хаки".

Scotty C. 12 нояб. 2013, в 00:31

Ещё вопросы

Возможно, потому что если он находится внутри родительского элемента, он будет находиться в том же z-индексе, что и родительский. Это не должно быть в родительском элементе, чтобы быть на его собственном z-индексе.
Значения z-index сложены ... см. Как изменить порядок вложенных дочерних элементов
то, что вы ищете, это stacking context developer.mozilla.org/en-US/docs/Web/Guide/CSS/…

BoltClock · Accepted Answer · 2013-11-12T02-45-00.000Z

Он работает только в том случае, если вы не касаетесь родительского значения z-индекса по умолчанию.

Это связано с тем, что установка z-index на что-то другое, кроме auto по умолчанию на позиционированном элементе, заставляет его установить новый контекст стекирования, и элемент не может быть расположен за элементом, который создал контекст стекирования, в котором он находится. (Элемент не может быть расположенный за корневым контекстом укладки, например, как утверждает Скотти С.)

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

Все детали можно найти в спецификации, но суть этого дала ваш вопрос.