Influenza dell'indice z di un elemento sull'indice z di: before /: after pseudo element

Question

Ecco un comportamento che non capisco riguardo a z-index e css pseudo element :: before/:: after .

è illustrato in questa jsfiddle: http://jsfiddle.net/jgoyon/T6QCf/

ho creato una scatola posizionato e contenuti aggiunti con :: dopo pseudo elemento (posizionato pure).

• se regolo un z-index a :: dopo pseudo elemento, tutto funziona bene e posso posizionarlo sopra o sotto il genitore giocando con indice z

#no-z-index { 
     background:lightblue; 
     width:100px; 
     height:100px; 
     position:relative; 
    } 
    #no-z-index:after { 
     content: 'z-index -1'; 
     width:50px; 
     height:50px; 
     background:yellow; 
     position:absolute; 
     z-index:-1; /* z-index in question */ 
     top:70px; 
     left:70px; 
    } 

• se faccio lo stesso e imposta lo z-index del genitore, non funziona più.

#z-index { 
     background:lightblue; 
     left:200px; 
     width:100px; 
     height:100px; 
     position:relative; 
     z-index:0; /* parent z-index */ 
    } 
    #z-index:after { 
     content: 'z-index -1'; 
     width:50px; 
     height:50px; 
     background:yellow; 
     position:absolute; 
     z-index:-1; /* z-index in question */ 
     top:70px; 
     left:70px; 
    } 

E 'un comportamento previsto?

Answer 1

Questo comportamento è previsto, documentato nello spec.

Quando non si specifica z-index sull'elemento di generazione (predefinito a auto), l'elemento di generazione e lo pseudoelemento appariranno nello stesso contesto di stacking. Ciò consente allo pseudo-elemento di apparire sotto l'elemento se il suo z-index è inferiore.

Quando non si specifica z-index sull'elemento di generazione, che elemento crea un nuovo contesto di stratificazione per lo pseudo-elemento (e in effetti tutti i suoi discendenti), impedendo la pseudo-elemento da sempre apparire sotto di esso, anche se gli dai un valore negativo z-index.