Estoy un poco confundido sobre el uso de z-index
para decidir el orden de la stack.
No entiendo muy bien cómo los navegadores tratan los elementos con la propiedad de position
junto con los que no la tienen.
¿Existe una regla general para decidir el orden de la stack de elementos, ya sea que haya posicionado elementos explícitamente o no?
Se aprecian ejemplos de diferentes situaciones. Generalmente hablando:
s con posición establecida y sin posición establecida.
-
s nesteds mezclados con hermanos
s con posición establecida y sin establecer posición.
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:
- Fondos y bordes del elemento raíz
- Elementos de bloque no posicionados, no flotantes, en el orden en que aparecen en el código fuente
- Elementos flotantes no ubicados, en el orden en que aparecen en el código fuente
- Elementos en línea
- 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:
- Fondos y bordes del elemento raíz
- Elementos posicionados con un
z-index
de menos de 0
- Elementos de bloque no posicionados, no flotantes, en el orden en que aparecen en el código fuente
- Elementos flotantes no ubicados, en el orden en que aparecen en el código fuente
- Elementos en línea
- Elementos posicionados, en el orden en que aparecen en el código fuente
- 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
- CSS se representa de manera diferente en el servidor web que en el entorno de desarrollo
- Haga que los elementos de flex-grow se expandan en función de su tamaño original
- ¿Debo completar las citas de los nombres de las familias de fonts en CSS?
- Retardo: desplázate en CSS3?
- La nueva línea Bootstrap Grid System no se ve bien
- Bootstrap xs columnas envuelven
- Cree una variable en el archivo .CSS para usar dentro de ese archivo .CSS
- Lista de prefijos de proveedor de CSS
- ¿Hay alguna manera de dividir una lista en columnas?
- Las fonts de icono no se cargan en IE11
- Cómo centrar verticalmente la imagen dentro de div
Intereting Posts
¿Puedo usar variables para selectores?Animación de agua de rellenoBorde doble con diferente colorCómo agregar una clase “activa” a Html.ActionLink en ASP.NET MVC¿Cuál es la forma más simple de jQuery de tener una div ‘position: fixed’ (siempre en la parte superior)?Problema IE7 Z-Index – Menú contextualCómo incluir vistas / estilos específicos parciales en AngularJS¿Mejores prácticas de CSS sobre identificación y clase?