css - Comprender el orden de apilamiento del índice z

css-position z-index

Question

Estoy un poco confundido sobre el uso de z-index para decidir el orden de la pila.

No entiendo cómo los navegadores tratan los elementos con la propiedad de position junto con aquellos sin ella.

¿Existe una regla general para decidir el orden de apilamiento de los elementos, ya sea que haya colocado elementos explícitamente o no?

Se aprecian ejemplos de diferentes situaciones. Generalmente hablando:

1. hermanos mixtos <div> s con posición establecida y sin posición establecida.
2. <div> s anidados mezclados con <div> s hermanos con posición establecida y sin posición establecida.

Answer 1

Conceptos básicos de la propiedad CSS z-index

Un concepto simple

La propiedad del 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, puede interpretarse como el plano en el que los objetos se mueven cada vez más cerca de usted. (Obtenga más información sobre el sistema de coordenadas cartesianas ).

^{Fuente: Wikipedia}

z-index funciona en elementos posicionados

A menos que se trate de elementos flexibles o elementos de cuadrícula, la propiedad del z-index solo funciona 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 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 cuadrícula pueden crear un contexto de apilamiento incluso cuando la position es static .

4.3. Artículo Flex Z-Ordering

Los elementos flexibles pintan exactamente igual que los bloques en línea, excepto que el orden del documento modificado se usa en lugar del orden del documento sin procesar, y z-index valores del z-index distintos de crear auto un contexto de apilamiento 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 del documento modificado se usa en lugar del orden del documento sin procesar, y z-index valores del z-index además de crear auto un contexto de apilamiento, incluso si la position es static .

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

Contextos de apilamiento

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

(Consulte también: Lista completa de circunstancias en las que se crea un contexto de apilamiento ) .

El contexto de apilamiento 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 apilamiento y el alcance de la influencia de la propiedad.

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

Si alguna vez ha intentado aplicar valores de z-index cada vez más altos solo para descubrir que el elemento nunca se mueve al frente, podría estar tratando de superponer un elemento en un contexto de apilamiento 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 apilamiento forman lo que se conoce como contexto de apilamiento. Una comprensión completa de los contextos de apilamiento es clave para comprender realmente cómo funcionan el índice z y el orden de apilamiento.

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

~ Lo que nadie te dijo sobre el índice Z

Orden de apilamiento

CSS se adhiere a un orden de apilamiento al diseñar elementos en una página. Estas son las reglas de apilamiento cuando no hay z-index especificado, desde el más alejado hasta el 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 posicionados, 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 apilamiento:

1. Fondos y bordes del elemento raíz.
2. Elementos posicionados con un z-index inferior a 0
3. Elementos de bloque no posicionados, no flotantes, en el orden en que aparecen en el código fuente
4. Elementos flotantes no posicionados, 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 apilamiento, z-index es fácil.

Para ver ejemplos de z-index en acción, consulte: ¡ Cómo funciona z-index!

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

Para un resumen completo z-index , con muchos ejemplos e ilustraciones, consulte: MDN Comprensión z-index CSS

Y para una inmersión profunda en los contextos de apilamiento, lea: W3C Descripción elaborada de los contextos de apilamiento