Как сделать дочерний элемент более высоким z-index, чем родительский?

Предположим, что у меня есть этот код:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

Этот jsFiddle: http://jsfiddle.net/ZjXMR/

Теперь мне нужно иметь <div class="child"> в верхней части <div class="wholePage">, но в jsFiddle вы можете увидеть, что дочерний элемент, обработанный до <div class="wholePage">.

Если вы удалите класс parent position или z-index, все будет хорошо. Это правильное поведение, которое мне нужно: http://jsfiddle.net/ZjXMR/1/

Как я могу сделать это с помощью z-index и не удаляя что-либо со страницы?

Ответы

Ответ 1

Это невозможно, так как дочерний z-index установлен в тот же индекс стека, что и его родитель.

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

Ответ 2

Чтобы достичь желаемого без удаления каких-либо стилей, вам нужно сделать z-индекс класса ".parent" более крупным, чем класс ".wholePage".

.parent {
    position: relative;
    z-index: 4; /*matters since it sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

jsFiddle: http://jsfiddle.net/ZjXMR/2/

Ответ 3

Укажите родительский индекс z: -1 или непрозрачность: 0.99

Ответ 4

Нет ничего невозможного. Используйте силу.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

Ответ 5

Используйте нестатические позиции вместе с большим z-индексом в дочернем элементе:

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}

Ответ 6

Попробуйте использовать этот код, он работает для меня:

z-index: unset;