Z-index con lo pseudoelemento precedente

Question

Ho creato un elemento 'header' con un elemento pseudo prima. l'elemento pseudeo deve essere dietro l'elemento genitore. Tutto funziona alla grande fino al momento in cui do il mio 'header' a z-index.

Quello che voglio: l''intestazione' gialla in primo piano, lo pseudoelemento rosso sullo sfondo e un semplice indice z di 30 sull'elemento 'intestazione' giallo.

header { 
    background: yellow; 
    position:relative; 
    height: 100px; 
    width: 100px; 
    z-index:30; /*This is the problem*/ 
} 

header::before { 
    content:"Hide you behind!"; 
    background: red; 
    position:absolute; 
    height: 100px; 
    width: 100px; 
    top:25px; 
    left:25px; 
    z-index:-1; 
} 

È possibile verificare il mio problema su questo link (http://jsfiddle.net/tZKDy/) e si vede il problema quando si imposta/rimuovere il z-index sull'elemento de 'intestazione'.

Answer 1

Lo pseudoelemento :: before viene inserito all'interno dell'elemento di intestazione.

CSS Spec:

L': before e: after pseudo-elementi interagiscono con altre caselle come se fossero elementi reali inseriti solo all'interno del loro elemento associato.

Impostazione della z-index per l'elemento di intestazione creates a new Stacking Context, in modo che il nuovo elemento pseudo si è creato non può galleggiare dietro l'elemento di intestazione, perché sarebbe dovuto andare fuori di tale contesto di stratificazione.

Suggerisco di precedere semplicemente l'elemento di intestazione da un altro elemento, quindi impila correttamente per impostazione predefinita. Example.