Esta publicación se publicó originalmente en Coder-Coder.com.
Z-index es una propiedad de CSS que le permite colocar elementos en capas uno encima del otro. Es muy útil y, sinceramente, una herramienta muy importante para saber cómo usar CSS.
Desafortunadamente, el índice z es una de esas propiedades que no siempre se comporta de manera intuitiva. Parece simple al principio: un número de índice z más alto significa que el elemento estará encima de los elementos con números de índice z más bajos. Pero hay algunas reglas adicionales que complican las cosas. ¡Y no siempre puede arreglar las cosas configurando el índice Z en 999999! ?
Este artículo explicará en detalle cuatro de las razones más comunes por las que el índice z no funciona para usted, y exactamente cómo puede solucionarlo.
Revisaremos algunos ejemplos de código reales y los resolveremos. Después de leer este artículo, podrá comprender y evitar los errores comunes del índice Z.
Veamos la primera razón:
1. Los elementos en el mismo contexto de apilamiento se mostrarán en orden de aparición, con los últimos elementos encima de los primeros.
En nuestro primer ejemplo, tenemos un diseño relativamente simple que incluye 3 elementos principales:
- Una imagen de un gato
- Un bloque blanco con texto.
- Otra imagen del mismo gato
Aquí está el marcado HTML para eso:
Meow meow meow... En este diseño, lo ideal es que el bloque de texto blanco esté encima de ambos gatos.
Para intentar lograr esto, hemos agregado algunos márgenes negativos al CSS para ambas imágenes de gatos, de modo que se superpongan un poco con el bloque blanco:
.cat-top { margin-bottom: -110px; } .cat-bottom { float: right; margin-top: -120px; }Sin embargo, se ve así:
De hecho, el primer gato se coloca debajo del bloque de contenido blanco, tal como queremos. ¡Pero la segunda imagen del gato está colocada en la parte superior del bloque!
¿Por qué está pasando esto?
La razón de este comportamiento se debe al orden de apilamiento natural en la página web. Estas pautas básicamente determinan qué elementos estarán en la parte superior y cuáles en la parte inferior.
Incluso si los elementos no tienen su índice Z establecido, hay una rima y una razón por la que estarán en la parte superior.
En nuestro caso, ninguno de los elementos tiene un valor de índice z. Entonces, su orden de apilamiento está determinado por su orden de aparición. Según esta regla, los elementos que vengan más adelante en el marcado estarán encima de los elementos que vienen antes.
(Puede leer más de las pautas de orden de apilamiento en Mozilla Developer Network aquí).
En nuestro ejemplo con los gatos y el bloque blanco, están obedeciendo esta regla. Es por eso que el primer gato está debajo del elemento de bloque blanco y el bloque blanco está debajo del segundo gato.
Ok, el orden de apilamiento está muy bien, pero ¿cómo arreglamos el CSS para que el segundo gato esté debajo del bloque blanco?
Veamos la segunda razón:
2. El elemento no tiene su posición establecida
Una de las otras pautas que determinan el orden de apilamiento es si un elemento tiene su posición establecida o no.
Para establecer la posición de un elemento, agregue la positionpropiedad CSS a cualquier cosa que no sea static, como relativeo absolute. (Puedes leer más sobre esto en este artículo que escribí).
Según esta regla, los elementos posicionados se mostrarán encima de los elementos no posicionados.
Por lo tanto, establecer el bloque blanco position: relativey dejar los dos elementos de gato sin colocar colocará el bloque blanco en la parte superior de los gatos en el orden de apilamiento.
Así es como se verá: también puedes jugar con el Codepen de arriba.
¡Woohoo!
Ahora, lo siguiente que queremos hacer es rotar el gato de abajo boca abajo, usando la transformpropiedad. De esa manera, ambos gatos estarán debajo del bloque blanco, con solo sus cabezas sobresaliendo.
Pero hacerlo puede causar más z-indexconfusión relacionada. Abordaremos el problema y la solución en la siguiente parte.
3. Establecer algunas propiedades CSS como opacidad o transformación colocará el elemento en un nuevo contexto de apilamiento.
Como acabamos de mencionar, queremos poner boca abajo al gato de abajo. Para lograr esto, agregaremos transform: rotate(180deg).
.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }¡Pero esto hace que el gato de abajo se muestre nuevamente en la parte superior del bloque blanco!
¿Qué diablos está pasando aquí?
Es posible que no se encuentre con este problema a menudo, pero otro aspecto del orden de apilamiento es que a algunas propiedades CSS les gusta transformo opacitycolocarán el elemento en su propio contexto de apilamiento nuevo.
Lo que esto significa es que agregar transformal .cat-bottomelemento hace que se comporte como si tuviese un valor z-indexde 0. ¡Aunque no tenga su positiono z-indexestablecido en absoluto! (W3.org tiene documentación informativa pero bastante densa sobre cómo funciona esto con la opacitypropiedad)
Recuerde, nunca agregamos un z-indexvalor al bloque blanco, solo position: relative. Esto fue suficiente para colocar el bloque blanco encima de los gatos sin posicionar.
Pero dado que el .bottom-catelemento actúa como si estuviera relativamente posicionado con z-index: 0, la transformación lo ha posicionado sobre el bloque blanco.
La solución a esto es establecer position: relativey establecer explícitamente z-indexal menos el bloque blanco. Podrías ir un paso más allá y colocar position: relativey bajar z-indexlos elementos del gato, solo para estar más seguro.
.content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; }En mi opinión, hacer esto resolverá la mayoría, si no todos, los problemas más básicos del índice Z.
Ahora, pasemos a nuestra última razón por la que z-indexno está funcionando. Este es un poco más complejo, porque involucra elementos padre e hijo.
4. El elemento está en un contexto de apilamiento más bajo debido al nivel de índice Z de su padre
Veamos nuestro ejemplo de código para esto:
Esto es lo que tenemos: una página web simple con contenido regular y una pestaña lateral rosa que dice "Enviar comentarios" que se coloca en la parte superior del contenido.
Luego, cuando haces clic en la foto del gato, se abre una ventana modal con una superposición de fondo gris transparente.
Sin embargo, incluso cuando la ventana modal está abierta, la pestaña lateral sigue estando encima de la superposición gris. Queremos que la superposición se muestre sobre todo, incluida la pestaña lateral.
Echemos un vistazo al CSS de los elementos en cuestión:
.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }Todos los elementos tienen su posición establecida, y la pestaña lateral tiene un valor z-indexde 5, que la coloca encima del elemento de contenido, que está en z-index: 1.
Luego, el modal tiene lo z-index: 100que debería ponerlo en la parte superior de la pestaña lateral en z-index: 5. Pero, en cambio, la superposición modal está debajo de la pestaña lateral.
¿Por qué está pasando esto?
Anteriormente, abordamos algunos factores que entran en el contexto de apilamiento, como si el elemento tiene su posición establecida, así como su orden en el marcado.
Pero otro aspecto más del contexto de apilamiento es que un elemento hijo se limita al contexto de apilamiento de su padre.
Echemos un vistazo más de cerca a los tres elementos en cuestión.
Aquí está el marcado que tenemos:
Al observar el marcado, podemos ver que el contenido y los elementos de la pestaña lateral son hermanos. Es decir, existen en el mismo nivel en el marcado (esto es diferente del nivel del índice z). Y el modal es un elemento hijo del elemento de contenido.
Debido a que el modal está dentro del elemento de contenido, su z-indexde 100 solo tiene un efecto dentro de su padre, el elemento de contenido. Por ejemplo, si hubiera otros elementos secundarios que fueran hermanos del modal, sus z-indexvalores los colocarían uno encima o debajo del otro.
Pero el z-indexvalor de esos elementos secundarios no significa nada fuera del elemento principal, porque el elemento de contenido principal tiene el z-indexvalor 1.
Entonces sus hijos, incluido el modal, no pueden salir de ese z-indexnivel.
(Puede recordarlo con esta metáfora un poco deprimente: un niño puede ser limitado por sus padres y no puede liberarse de ellos).
Hay un par de soluciones para este problema:
Solución: mueva el modal fuera del contenido principal y al contexto de apilamiento principal de la página.
El marcado corregido se vería así:
Ahora, el elemento modal es un elemento hermano de los otros dos. Esto coloca a los tres elementos en el mismo contexto de apilamiento que ellos, por lo que cada uno de sus niveles de índice z ahora se afectará entre sí.
En este nuevo contexto de apilamiento, los elementos se mostrarán en el siguiente orden, de arriba a abajo:
- modal (
z-index: 100) - pestaña lateral (
z-index: 5) - contenido (
z-index: 1)
Solución alternativa: elimine el posicionamiento del contenido para que no limite el índice z del modal.
Si no desea o no puede cambiar el marcado, puede solucionar este problema eliminando la positionconfiguración del elemento de contenido:
.content { // No position set } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }Dado que el elemento de contenido ahora no está posicionado, ya no limitará el z-indexvalor del modal . Entonces, el modal abierto se colocará en la parte superior del elemento de la pestaña lateral, debido a que es más alto z-indexde 100.
Si bien esto funciona, personalmente optaría por la primera solución.
Porque si por alguna razón en el futuro tiene que posicionar el elemento de contenido, nuevamente limitará el orden del modal en el contexto de apilamiento.
En resumen
¡Espero que este tutorial te haya resultado útil! En resumen, la mayoría de los problemas con el índice z se pueden resolver siguiendo estas dos pautas:
- Compruebe que los elementos tengan su conjunto de posiciones y los números de índice z en el orden correcto.
- Asegúrese de no tener elementos principales que limiten el
z-indexnivel de sus hijos.
¿Quieren más?
¡Estoy creando un curso de diseño receptivo! Regístrese aquí para recibir un correo electrónico cuando se publique.
Escribo tutoriales de desarrollo web en mi blog coder-coder.com, publico mini-consejos en Instagram y tutoriales de codificación en YouTube.