css - top - z-index position relative

¿El índice z especifica el nivel de pila de un elemento flexible no posicionado?

Question

En CSS 2.1, z-index solo se aplica a los elementos posicionados y especifica dos cosas diferentes:

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

Pero Flexbox dice esto:

Los elementos flexibles pintan exactamente igual que los bloques en línea [CSS21] , excepto que el order documento modificado por orden se usa en lugar del orden de documento sin [CSS21] , y z-index valores de z-index que no sean auto crean un contexto de apilamiento incluso si la position es static .

Luego, a diferencia de CSS2.1, establecer z-index en algún entero en un elemento flexible no posicionado crea un contexto de apilamiento.

Sin embargo, no veo definido en ningún lugar cuál debe ser el nivel de pila de este contexto de apilamiento.

Un caso similar es la opacity , que también puede crear establecer contextos de apilamiento en elementos no posicionados. Pero en este caso, el nivel de pila se especifica correctamente para que sea 0:

Si un elemento con una opacidad menor que 1 no está posicionado, las implementaciones deben pintar la capa que crea, dentro de su contexto de apilamiento principal, en el mismo orden de apilamiento que se usaría si fuera un elemento posicionado con z-index: 0 y opacity: 1 .

En mi opinión estas opciones son razonables:

• El nivel de pila es el valor especificado en z-index
• El nivel de pila es 0.
• El elemento flexible envuelve a sus descendientes en un contexto de apilamiento para que se pinten juntos, pero el elemento flexible en sí mismo se pinta como elementos no posicionados en flujo normales (como si no estableciera un contexto de apilamiento).

De acuerdo con la siguiente prueba, tanto Firefox como Chrome hacen la primera opción.

.container {
  display: flex;
  padding-left: 20px;
}
.item {
  padding: 20px;
  background: #ffa;
  align-self: flex-start;
  margin-left: -20px;
}
.item:nth-child(even) {
  background: #aff;
  margin-top: 40px;
}
.za::after{ content: ''z-index: auto''; }
.z0 { z-index: 0; } .z0::after{ content: ''z-index: 0''; }
.z1 { z-index: 1; } .z1::after{ content: ''z-index: 1''; }
.z-1 { z-index: -1; } .z-1::after{ content: ''z-index: -1''; }

<div class="container">
  <div class="item z1"></div>
  <div class="item z0"></div>
  <div class="item za"></div>
  <div class="item za"></div>
  <div class="item z-1"></div>
</div>

¿Está este comportamiento definido en algún lugar?

Answer 1

Grupo de trabajo CSS:

El CSSWG no pudo encontrar una buena razón para hacer que los elementos flexibles establezcan contextos de pseudoapilamiento, por lo que hemos resuelto tratarlos de la misma manera que los elementos de celdas de bloques y tablas.

_{fuente: https://lists.w3.org/Archives/Public/www-style/2012Jul/0382.html}

Más información:

• [css3-flexbox] Orden de pintura
• [css3-flexbox] ¿Pintar elementos de flexión atómicamente?
• [css3-position] contextos z-index y pseudo-apilamiento
• [css3-flexbox] [css-ALL] ¿Debería z-index Simplemente trabajar en elementos flexibles?

Además, aunque no es una respuesta directa a la pregunta, los siguientes Borradores del Editor del W3C brindan sugerencias sólidas sobre dónde irá el CSS con z-index y los contextos de apilamiento.

11. Presentación en capas ~ Módulo de diseño posicionado CSS nivel 3

12. Contexto de apilamiento detallado ~ Módulo de diseño posicionado CSS nivel 3

4.3. Ordenamiento del eje Z: la propiedad del z-index ~ Módulo de diseño de cuadrícula CSS Nivel 1

Es interesante observar que z-index , como se define actualmente en el borrador del editor de CSS Positioned 3 , se aplica solo a los elementos posicionados. Esto no es diferente de CSS 2.1 . Sin embargo , los elementos de la cuadrícula y los elementos flexibles pueden crear contextos de apilamiento con z-index , incluso cuando la position es static .