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

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

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

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

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

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

De esto se desprende claramente que primero pintamos los elementos con negativo z-indexen el paso (3), luego los que tienen 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 cuadro pertenece a un contexto de apilamiento . Cada cuadro en un contexto de apilamiento determinado tiene un nivel de pila entero, 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. Las cajas con el mismo nivel de pila en un contexto de apilamiento se apilan de abajo hacia arriba según el orden del árbol de documentos.

Para comprender cuándo se pintará cada elemento, necesita conocer su contexto de apilamiento y su nivel de pila dentro de este contexto de apilamiento (definido por z-index). También necesitas 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:

1. El nivel de pila de la caja en el contexto de apilamiento actual.
2. Si la caja establece un contexto de apilamiento

Los valores tienen los siguientes significados:

<integer>

Este número entero es el nivel de pila del cuadro generado en el contexto de apilamiento 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 sea z-index(negativo o positivo). El z-indexdel elemento hijo simplemente nos dirá el orden de pintura dentro del elemento padre (esto cubre el segundo punto) .

Ahora, si solo el elemento hijo tiene un positivo z-indexy no configuramos nada en el elemento padre, considerando el orden de pintura, el hijo se pintará más tarde (en el paso (9)) y el padre 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 pertenecerá a él.

No hay forma de tener el elemento principal encima de un elemento secundario al establecer un elemento positivo z-index para el elemento secundario. Además, no hay forma de tener el padre encima del hijo si configuramos un z-indexelemento padre diferente de auto(ya sea positivo o negativo). ¹

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

Además 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:

1. Los contextos de apilamiento pueden estar contenidos en otros contextos de apilamiento y juntos crean una jerarquía de contextos de apilamiento.
2. Cada contexto de apilamiento es completamente independiente de sus hermanos : solo se consideran los elementos descendientes cuando se procesa el apilamiento.
3. Cada contexto de apilamiento es autónomo : después de apilar el contenido del elemento, todo el elemento se considera en el orden de apilamiento del contexto de apilamiento principal. ^árbitro

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

Ejemplo con un elemento que va debajo de su elemento padre incluso si éste tiene un 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>

Otro ejemplo donde podemos colocar un elemento entre dos elementos en otro contexto de apilamiento:

.box {
  position: relative;
  transform-style: preserve-3d;
  z-index: 0;
  height: 80px;
  background: blue;
}

.box>div {
  margin: 0 50px;
  height: 100px;
  background: red;
  z-index: 5;
  transform: translateZ(2px);
}

.outside {
  height: 50px;
  background: green;
  margin: -10px 40px;
  transform: translateZ(1px);
}

body {
  transform-style: preserve-3d;
}

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

<div class="outside"></div>

También podemos tener un orden de apilamiento loco como el siguiente:

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

body {
  transform-style: preserve-3d;
}

<div class="box" style="top:100px;left:50px;background:red;"></div>
<div class="box" style="top: 50px;left: 115px;background:blue;"></div>
<div class="box" style="top: 101px;left: 170px;background:green;"></div>
<div class="box" style="top: 175px;left: 115px;background:purple;transform: rotateY(-1deg);"></div>

Debemos tener en cuenta que el uso de dicho truco puede tener algún efecto secundario debido al hecho de que transform-styleafectará perspectiveal elemento. Relacionado: ¿Por qué la aplicación de un filtro CSS en el elemento principal altera la posición del elemento secundario?transformposition:absolute/fixed

Feb 27 '2019 10:02 Temani Afif