Come rendere elemento secondario superiore di genitore con z-index

Question

Supponiamo che io ho questo codice:

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

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

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

Ora, ho bisogno di avere <div class="child"> sopra di <div class="wholePage"> ma nel jsFiddle puoi vedere che l'elemento figlio è stato reso prima dello <div class="wholePage">.

Se si rimuove la classe parentposition o z-index, tutto funziona correttamente. Questo è il comportamento corretto di cui ho bisogno: http://jsfiddle.net/ZjXMR/1/

Come posso farlo con z-index e senza rimuovere nulla dalla pagina?

Answer 1

Questo è impossibile in quanto il z-index di un bambino è impostato sullo stesso indice di stack del relativo genitore.

Hai già risolto il problema rimuovendo lo z-index dal genitore, mantienilo in questo modo o rendi l'elemento un fratello piuttosto che un figlio.

Answer 2

Per ottenere ciò che si desidera senza rimuovere alcuno stile, è necessario rendere lo z-index della classe ".parent" più grande della classe ".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

Lascia il genitore z-index: -1, o opacità: 0,99

Answer 4

Usa posizione non statica oltre a una maggiore z-index in elemento secondario:

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

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

Answer 5

Niente è impossibile. Usa la forza.

.parent { 
    position: relative; 
} 

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

Answer 6

Ho avuto lo stesso problema. Quello che ho fatto è stato aggiungere la posizione: relativo; e z-index: 1; div al bambino

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