Z-index with before pseudo-element

Question

He creado un elemento 'header' con un elemento before-pseudo. el elemento pseudeo debe estar detrás del elemento padre. Todo funciona bien hasta el momento en que doy mi 'encabezado' un índice z.

Lo que quiero: el "encabezado" amarillo en el primer plano, el pseudo-elemento rojo en el fondo y un simple z-index de 30 en el elemento amarillo "encabezado".

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

Puede probar mi problema en este enlace (http://jsfiddle.net/tZKDy/) y nos vemos el problema al configurar/eliminar el índice z en el elemento de 'cabecera'.

Answer 1

El :: pseudo-elemento anterior se coloca dentro del elemento del encabezado.

CSS Spec:

El: before y: after pseudo-elementos interactúan con otras cajas como si fueran elementos reales insertadas justo dentro de su elemento asociado.

Ajuste del índice z para el elemento de cabecera creates a new Stacking Context, por lo que la nueva pseudo-elemento que ha creado no puede flotar detrás del elemento de cabecera, ya que tendría que ir fuera de ese contexto de pila.

Le sugiero que simplemente preceda al elemento de encabezado por otro elemento, por lo que se acumula correctamente de forma predeterminada. Example.