Einfluss des Z-Index eines Elements auf den Z-Index von: vor /: nach Pseudo-Element

Question

Hier ist ein Verhalten, das ich nicht ganz verstehe in Bezug auf Z-Index und Css Pseudo-Element :: vor/:: nach .

wird es auf dieser jsfiddle veranschaulicht: http://jsfiddle.net/jgoyon/T6QCf/

Ich habe eine Box positioniert und mit hinzugefügter Inhalt :: nach pseudo-Element (wie auch positioniert).

• , wenn ich einen Z-Index zum :: nach Pseudo-Elemente festgelegt, die gut arbeiten wird alles und ich kann es über die Position oder unter dem übergeordneten durch das Spiel mit z-index

#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; 
    } 

• Wenn ich das gleiche mache und den Z-Index des Elternteils einstelle, funktioniert es nicht mehr.

#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; 
    } 

Ist es ein erwartetes Verhalten?

Answer 1

Dies ist das erwartete Verhalten, dokumentiert in der spec.

Wenn Sie z-index nicht für das generierende Element angeben (standardmäßig), werden das generierende Element und das Pseudoelement im selben Stapelkontext angezeigt. Dadurch kann das Pseudoelement unter dem Element angezeigt werden, wenn z-index niedriger ist.

Wenn Sie z-index auf dem Erzeugungselement angeben, erstellt das Element einen neuen Stapelkontext für das Pseudoelement (und in der Tat alle seine Nachkommen), verhindern, dass das Pseudoelement jemals darunter erscheinen, auch wenn Sie geben es eine negative z-index.