css - working - z index not works

índice z cuando se usa:: after under element

Question

Si usamos z-index combinado con position: absolute; Es posible colocar el ::before de un elemento debajo de sí mismo. Hay un buen ejemplo en otra pregunta ( jsfiddle.net/Ldtfpvxy ).

Básicamente

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

rinde

Por lo tanto, el contexto / orden de apilamiento está definido por z-index . Pero cuando aplico z-index: 1; al elemento y z-index: -1; a su ::before no puedo lograr lo mismo.

Solo si omito z-index del elemento.

¿Alguna idea de por qué esto es? ¿El elemento se representa después de su ::before y ::after para que obtengan el mismo z-index ?

Trabajando: jsfiddle.net/Ldtfpvxy
No funciona: https://jsfiddle.net/Ldtfpvxy/1/ (solo se agregó z-index: 1; al elemento)

Answer 1

Al especificar z-index está creando un nuevo contenido de apilamiento;

si esto se hace solo en el elemento child ::after pseudo-elem, el padre no establecerá un nuevo contenido de apilamiento y todo funcionará como se espera.

Pero al agregar z-index en el elemento padre se iniciará una nueva pila (que también envolverá la pila hijo).
Y si observa los primeros 2 puntos en la especificación de representación de pila , verá que el fondo se procesará antes que otras pilas secundarias:

Dentro de cada contexto de apilamiento, las siguientes capas se pintan en orden de principio a fin:

1. El fondo y los bordes del elemento que forma el contexto de apilamiento.
2. los contextos de apilamiento de niños con niveles de pila negativos (primero los más negativos).
3. ...

Aquí hay un ejemplo , para aclarar el comportamiento de representación diferente para el fondo de apilamiento anidado.

position: relative no es opcional ; con la position:static predeterminada position:static , z-index no tiene ningún efecto.

Answer 2

Su div y su :: after pseudo-element son miembros del mismo contexto de apilamiento, en este caso el contexto de apilamiento raíz. El nuevo contexto de apilamiento que le da al pseudo-elemento se usaría como una referencia a sus hijos (que no existen), pero el valor del z-index aplica al contexto de apilamiento actual. Y la especificación de CSS dicta el siguiente orden de pintura para cada contexto de apilamiento:

Dentro de cada contexto de apilamiento, las siguientes capas se pintan en orden de principio a fin:

1. El fondo y los bordes del elemento que forma el contexto de apilamiento.
2. los contextos de apilamiento de niños con niveles de pila negativos (primero los más negativos).
3. los descendientes en el flujo, no en el nivel en línea, no posicionados.
4. Los flotadores no posicionados.
5. los descendientes en el flujo, en el nivel en línea, no posicionados, incluidas las tablas en línea y los bloques en línea.
6. los contextos de apilamiento secundarios con nivel de pila 0 y los descendientes posicionados con nivel de pila 0.
7. los contextos de apilamiento de niños con niveles de pila positivos (menos positivos primero).

Mire, los contextos de apilamiento de niños con niveles de pila negativos , como su div::after se pintan antes que los descendientes posicionados con el nivel de pila 0 , como el propio div . Esto explica el comportamiento que notaste.