Comprender el orden de astackmiento z-index

Conceptos básicos de la propiedad CSS z-index

Un concepto simple

La propiedad z-index se basa en un concepto simple: los elementos con valores más altos se ubicarán frente a los elementos con valores más bajos a lo largo del eje z. Entonces, si aplica z-index: 1 a div.box1 , y div.box2 tiene un z-index: 0 , entonces div.box1 se superpondrá a div.box2 .

En términos del eje z, se refiere a la profundidad en un plano tridimensional. En su computadora, se puede interpretar como el plano en el que los objetos se mueven más cerca y más lejos de usted. (Obtenga más información sobre el sistema de coordenadas cartesianas ).

^{Fuente: Wikipedia}

z-index funciona en elementos posicionados

A menos que trabaje con elementos flexibles o elementos de grillas, la propiedad de z-index funciona solo en elementos posicionados. Esto significa que puede usar z-index en elementos con position: absolute , position: relative , position: fixed o position: sticky . Si el elemento tiene una position: static (el valor predeterminado), o algún otro esquema de posicionamiento como un float , entonces z-index no tendrá ningún efecto.

Como se señaló, aunque z-index , como se define en CSS 2.1 , se aplica solo a los elementos posicionados, los elementos flexibles y los elementos de la cuadrícula pueden crear un contexto de astackmiento incluso cuando la position es static .

4.3. Elemento flexible Pedido Z

Los elementos Flex pintan exactamente lo mismo que los bloques en línea, excepto que el orden de documento modificado por orden se utiliza en lugar del orden de documento sin procesar, y z-index valores de z-index que no sean auto crean un contexto de astackmiento incluso si la position es static .

5.4. Orden del eje Z: la propiedad del z-index

El orden de pintura de los elementos de la cuadrícula es exactamente el mismo que el de los bloques en línea, excepto que el orden de documento modificado por orden se utiliza en lugar del orden de documento sin procesar, y z-index valores de z-index que no sean auto crean un contexto de astackmiento incluso si la position es static .

Aquí hay una demostración de z-index trabaja en elementos flexibles no posicionados: https://jsfiddle.net/m0wddwxs/

Contextos de astackmiento

Una vez que se coloca un elemento y se aplica un z-index , se crea un contexto de astackmiento.

(También vea: Lista completa de circunstancias donde se crea un contexto de astackmiento ) .

El contexto de astackmiento es un conjunto de reglas para administrar el elemento posicionado con z-index y sus descendientes. Estas reglas rigen la colocación de elementos secundarios en el orden de astackmiento y el scope de la influencia de la propiedad.

Esencialmente, el contexto de astackmiento limita el scope del z-index al elemento mismo, y sus elementos secundarios no pueden afectar el orden de astackmiento de los elementos en otro contexto de astackmiento.

Si alguna vez ha intentado aplicar valores cada vez más altos z-index para descubrir que el elemento nunca se mueve al frente, podría estar tratando de superponer un elemento en un contexto de astackmiento diferente.

Los grupos de elementos con un elemento primario común que se mueven hacia adelante o hacia atrás juntos en el orden de astackmiento conforman lo que se conoce como contexto de astackmiento. Una comprensión completa de los contextos de astackmiento es clave para comprender realmente cómo funcionan el índice Z y el orden de astackmiento.

Cada contexto de astackmiento tiene un único elemento HTML como su elemento raíz. Cuando se forma un nuevo contexto de astackmiento en un elemento, ese contexto de astackmiento limita todos sus elementos secundarios a un lugar particular en el orden de astackmiento. Eso significa que si un elemento está contenido en un contexto de astackmiento en la parte inferior del orden de astackmiento, no hay forma de que aparezca frente a otro elemento en un contexto de astackmiento diferente que sea más alto en el orden de astackmiento, incluso con un ¡índice z de mil millones!

~ Lo que nadie te dijo sobre Z-Index

Orden de astackmiento

CSS se adhiere a un orden de astackmiento al diseñar elementos en una página. Estas son las reglas de astackmiento cuando no se especifica un z-index , desde el más lejano al más cercano:

1. Fondos y bordes del elemento raíz
2. Elementos de bloque no posicionados, no flotantes, en el orden en que aparecen en el código fuente
3. Elementos flotantes no ubicados, en el orden en que aparecen en el código fuente
4. Elementos en línea
5. Elementos posicionados, en el orden en que aparecen en el código fuente

Si se aplica una propiedad de z-index , se modifica el orden de astackmiento:

1. Fondos y bordes del elemento raíz
2. Elementos posicionados con un z-index de menos de 0
3. Elementos de bloque no posicionados, no flotantes, en el orden en que aparecen en el código fuente
4. Elementos flotantes no ubicados, en el orden en que aparecen en el código fuente
5. Elementos en línea
6. Elementos posicionados, en el orden en que aparecen en el código fuente
7. Elementos posicionados con z-index mayor que 0

Fuente: W3C

En pocas palabras: una vez que comprenda los contextos de astackmiento, z-index es fácil.

Para ver ejemplos de z-index en acción, vea: ¡ Cómo funciona el índice z!

Para un artículo breve pero altamente informativo que explica z-index (incluyendo cómo la opacity afecta el orden de astackmiento), consulte: Lo que nadie le dijo sobre el índice Z

Para obtener un resumen completo de z-index , con muchos ejemplos e ilustraciones, consulte: MDN Descripción del CSS z-index

Y para profundizar en los contextos de astackmiento, lea: W3C Descripción detallada de los contextos de astackmiento