Как сделать дочерний элемент верхнего чем родителя с г-индекс

Question

Пусть у меня есть этот код:

<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 и не удаляя что-либо со страницы?

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

Дайте родительский Z-индекс: -1, или непрозрачность: 0,99

Answer 4

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

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

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

Answer 5

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

.parent { 
    position: relative; 
} 

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

Answer 6

У меня была та же проблема. То, что я сделал, это просто добавить позицию: относительная; и z-индекс: 1; к дочернему div.

.child-div { 
    position: relative; 
    z-index: 1; /*or greater*/ 
}