¿Por qué un elemento con un valor de índice z no puede cubrir a su hijo?

Hoy, después de horas de depuración, aprendí esta regla de la manera más difícil:

Un elemento principal nunca puede cubrir (apilarse encima de) su elemento secundario si el elemento principal tiene un índice z de cualquier valor, sin importar cómo cambie el CSS del elemento secundario

¿Cómo puedo entender este comportamiento por lógica? ¿Está en las especificaciones?

.container {
 width: 600px;
 height: 600px;
 background-color: salmon;
 position: relative;
 z-index: 99;
 padding-top: 10px;
}
h1 {
 background-color: pink;
 position: relative;
 z-index: -1;
 font-family: monospace;
}

<div class="container">
 <h1>1. I can never be covered by parent if my z-index is positive.</h1>
 <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

Solución del problema

Hay dos cosas importantes que debe saber: el orden de pintura y el contexto de apilamiento. Si consulta las especificaciones, puede encontrar cómo y cuándo se pintan los elementos.

Apilamiento de contextos formados por descendientes posicionados con índices z negativos (excluyendo 0) en orden de índice z (primero el más negativo) y luego en orden de árbol.

Todos los descendientes posicionados, de opacidad o transformados, en orden de árbol que caen en las siguientes categorías:

Todos los descendientes posicionados con 'z-index: auto' o 'z-index: 0', en orden de árbol.

Apilamiento de contextos formados por descendientes posicionados con índices z mayores o iguales a 1 en el orden del índice z (primero el más pequeño) y luego en el orden del árbol.

De esto queda claro que primero pintamos los elementos con negativo z-indexen el paso (3), luego el que tiene z-indexigual a 0 en el paso (8), y finalmente los que tienen positivo z-indexen el paso (9), lo cual es lógico. También podemos leer en otra parte de la especificación:

Cada caja pertenece a un contexto de apilamiento. Cada cuadro en un contexto de apilamiento dado tiene un nivel de apilamiento de enteros, que es su posición en el eje z en relación con otros cuadros en el mismo contexto de apilamiento. Las cajas con niveles de pila más altos siempre se formatean delante de las cajas con niveles de pila más bajos. Las cajas pueden tener niveles de pila negativos. Los cuadros con el mismo nivel de pila en un contexto de pila se apilan de abajo hacia arriba según el orden del árbol de documentos.

Para comprender cuándo se pintará cada elemento, debe conocer su contexto de apilamiento y su nivel de apilamiento dentro de este contexto de apilamiento (definido por z-index). También necesita saber si ese elemento establece un contexto de apilamiento. Esta es la parte complicada, porque la configuración z-indexhará esto:

Para un cuadro posicionado, la propiedad del índice z especifica:

El nivel de pila de la caja en el contexto de pila actual.

Si la caja establece un contexto de apilamiento

Los valores tienen los siguientes significados:

<integer>

Este entero es el nivel de pila del cuadro generado en el contexto de pila actual. La caja también establece un nuevo contexto de apilamiento.

auto

El nivel de pila del cuadro generado en el contexto de apilamiento actual es 0. El cuadro no establece un nuevo contexto de apilamiento a menos que sea el elemento raíz.

Ahora tenemos toda la información para entender mejor cada caso. Si el elemento principal tiene un z-indexvalor distinto de auto, creará un contexto de apilamiento, por lo que el elemento secundario se pintará dentro de lo que z-indexsea (negativo o positivo). El z-indexdel elemento secundario simplemente nos dirá el orden de pintar dentro del elemento principal (esto cubre su segundo punto).

Ahora, si solo el elemento secundario tiene un positivo z-indexy no establecemos nada en el elemento principal, considerando el orden de pintado, el elemento secundario se pintará más tarde (en el paso (9)) y el principal en el paso (8). La única forma lógica de pintar el padre de arriba es aumentar el z-index, pero hacer esto nos hará caer en el caso anterior donde el padre establecerá un contexto de apilamiento y el elemento hijo le pertenecerá.

No hay forma de tener el elemento principal sobre un elemento secundario cuando se configura un elemento positivo z-index para el elemento secundario. Además, no hay forma de tener el padre por encima del hijo si establecemos un z-indexelemento diferente al padre auto(ya sea positivo o negativo). 1

El único caso en el que podemos tener un elemento secundario debajo de su elemento principal es establecer un elemento negativo z-indexen el elemento secundario y mantener el elemento principal en z-index: auto, por lo que este no creará un contexto de apilamiento y siguiendo el orden de pintura, el elemento secundario se pintará primero.

Además de z-index, existen otras propiedades que crean un contexto de apilamiento. En caso de que se enfrente a un orden de apilamiento esperado, también debe considerar esas propiedades para ver si se ha creado un contexto de apilamiento.

Algunos hechos importantes que podemos concluir de lo anterior:

Los contextos de apilamiento pueden estar contenidos en otros contextos de apilamiento y juntos crean una jerarquía de contextos de apilamiento.

Cada contexto de apilamiento es completamente independiente de sus hermanos: solo se consideran los elementos descendientes cuando se procesa el apilamiento.

Cada contexto de apilamiento es autónomo: después de apilar el contenido del elemento, se considera el elemento completo en el orden de apilamiento del contexto de apilamiento principal. árbitro

1: hay algunas formas complicadas si consideramos el uso de la transformación 3D.

Ejemplo con un elemento que va debajo de su elemento principal, incluso si este tiene un elemento z-indexespecificado.

.box {
 position:relative;
 z-index:0;
 height:80px;
 background:blue;
 transform-style: preserve-3d; /* This is important */
}
.box > div {
 margin:0 50px;
 height:100px;
 background:red; 
 z-index:-1; /* this will do nothing */
 transform:translateZ(-1px); /* this will do the magic */
}

<div class="box">
 <div></div>
</div>