¿Por qué z-index: -1; aparece por encima del índice Z: 1 ;?

Question

explicar este comportamiento:

<div style="z-index: 1"></div> 
<div></div> 
<div></div> 
<div></div> 

div { 
    position: relative; 
    background: red; 
    width: 100px; 
    height: 100px;  
} 

div:before { 
    position: absolute; 
    background: blue; 
    width: 100px; 
    height: 100px; 
    z-index: -1; 
    content: ""; 
    left: -5px; 
    top: -5px; 
} 

http://jsfiddle.net/2VexH/2/

única diferencia es que el primero tiene div z-index: 1 juego.

Answer 1

Al establecer un elemento posicionado z-index en cualquier cosa que no sea auto (el valor inicial) hace que el elemento genere un nuevo contexto de apilamiento para sus cuadros descendientes.

Esto evita que cualquiera de sus descendientes de aparecer debajo de ella, incluyendo el pseudo-elemento div:before, incluso si su z-index es negativo. Por supuesto, cualquier descendiente con un z-index negativo continuará apareciendo debajo de un descendiente con cero o positivo z-index dentro del elemento que lo contiene, pero ese elemento que lo contiene siempre estará en la parte posterior.

El resto de sus div elementos que no tienen un conjunto z-index utilizará el valor inicial en su lugar, y por lo tanto no genera apilamiento contextos para sus pseudo-elementos, permitiendo que los pseudo-elementos que aparecen debajo de la verdadera elementos. El contexto de apilamiento en el que se dibujan es el de body.

---

_{Tenga en cuenta que el contenido de de una raíz contexto de pila todavía aparecerá por encima del fondo de un descendiente con un negativo z-index. Esto es intencional y se trata con mayor detalle en this answer, con enlaces relevantes a la especificación.}