Wie Kind-Element machen oberen als Elternteil mit z-index

Question

Angenommen, ich habe diesen Code:

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

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

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

Nun, ich brauche oberhalb von <div class="wholePage"> haben <div class="child"> in aber in der jsFiddle können Sie sehen, dass das untergeordnete Element vor <div class="wholePage"> gerendert wird.

Wenn Sie die parent Klasse position oder z-index entfernen, funktioniert alles gut. Dies ist das richtige Verhalten, das ich brauche: http://jsfiddle.net/ZjXMR/1/

Wie kann ich das mit z-index und ohne etwas von Seite zu entfernen?

Answer 1

Dies ist unmöglich, da ein Kind z-index auf den gleichen Stapelindex wie seine Eltern eingestellt ist.

Sie haben das Problem bereits gelöst, indem Sie den Z-Index vom übergeordneten Element entfernen, es so beibehalten oder das Element zu einem Geschwister anstelle eines untergeordneten Elements machen.

Answer 2

Um zu erreichen, was Sie wollen, ohne Stile zu entfernen, müssen Sie den Z-Index der '.parent' Klasse größer als die '.wholePage' Klasse machen.

.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

Geben Sie die Mutter z-index: -1 oder Opazität: 0,99

Answer 4

Verwendung nicht-statische Position zusammen mit größerem z-Index in Geordnetes Elemente:

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

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

Answer 5

Nichts ist unmöglich. Benutze die Kraft.

.parent { 
    position: relative; 
} 

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

Answer 6

Ich hatte das gleiche Problem. Was ich tat, war einfach Position hinzufügen: relativ; und Z-Index: 1; zum Kind div.

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