Índice Z con pseudo-elemento anterior

Creé 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 verá el problema cuando configure / elimine el elemento z-index on de ‘header’.

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

Especificación de CSS :

Los pseudo-elementos: before y: after interactúan con otros cuadros como si fueran elementos reales insertados dentro de su elemento asociado.

Establecer el índice z para el elemento del encabezado crea un nuevo contexto de astackmiento , por lo que el nuevo pseudo elemento que creó no puede flotar detrás del elemento del encabezado, ya que tendría que salir de ese contexto de astackmiento.

Sugiero que simplemente preceda al elemento de encabezado por otro elemento, por lo que se acumula correctamente de forma predeterminada. Ejemplo .