index - select after css

Índice Z antes del pseudo-elemento

Question

He creado un elemento ''encabezado'' con un elemento antes del pseudo. El elemento pseudeo debe estar detrás del elemento padre. Todo funciona muy bien hasta el momento en que le doy a mi ''encabezado'' un índice z.

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

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 configura / elimina el índice z en el elemento de ''encabezado''.

Answer 1

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

Especificaciones de CSS :

Los: antes y después de los pseudo-elementos interactúan con otras cajas como si fueran elementos reales insertados justo dentro de su elemento asociado.

La configuración del índice z para el elemento de encabezado crea un nuevo Contexto de apilamiento , por lo que el nuevo pseudo elemento que creó no puede flotar detrás del elemento de encabezado, ya que tendría que salir del Contexto de apilamiento.

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