4 razones por las que su índice z no funciona (y cómo solucionarlo)

El índice Z es una propiedad CSS que le permite colocar elementos en capas uno encima del otro. Es súper útil y, sinceramente, es 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. Al principio parece simple: 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 hacen las cosas más complicadas. ¡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ódigos 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 elementos anteriores.

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:

Miau miau miau ...

En este diseño, idealmente queremos 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 gato, para que se superpongan un poco al bloque blanco:

.cat-top {
   margen inferior: -110px;
}
.cat-bottom {
   flotar derecho;
   margen superior: -120 px;
}

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 se coloca en la parte superior del bloque!

¿Por qué está pasando esto?

La razón de este comportamiento se debe al orden natural de apilamiento en la página web. Estas pautas básicamente determinan qué elementos estarán en la parte superior y cuáles estarán en la parte inferior.

Incluso si los elementos no tienen su conjunto de índice z, hay una rima y una razón para cuáles estarán en la cima.

En nuestro caso, ninguno de los elementos tiene un valor de índice z. Por lo tanto, su orden de apilamiento está determinado por su orden de aparición. De acuerdo con esta regla, los elementos que aparecen más adelante en el marcado estarán encima de los elementos que vienen antes que ellos.

(Puede leer más sobre 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 propiedad de posición CSS a cualquier cosa que no sea estática, como relativa o absoluta. (Puede leer más al respecto en este artículo que escribí).

De acuerdo con esta regla, los elementos posicionados se mostrarán encima de los elementos no posicionados.

Por lo tanto, establecer el bloque blanco en posición: relativo, y 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 inferior al revés, usando la propiedad de transformación. De esa manera, ambos gatos estarán debajo del bloque blanco, con solo sus cabezas sobresaliendo.

Pero hacerlo puede causar más confusión relacionada con el índice z. 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 el gato de abajo boca abajo. Para lograr esto, agregaremos transform: rotate (180deg).

.cat-bottom {
   flotar derecho;
   margen superior: -120 px;
   transformar: rotar (180 grados);
}

¡Pero esto hace que el gato inferior se muestre en la parte superior del bloque blanco nuevamente!

¿Qué diablos está pasando aquí?

Es posible que no se encuentre con este problema con frecuencia, pero otro aspecto del orden de apilamiento es que algunas propiedades de CSS, como la transformación o la opacidad, colocarán al elemento en su propio contexto de apilamiento nuevo.

Lo que esto significa es que agregar la transformación al elemento .cat-bottom hace que se comporte como si tuviera un índice z de 0. ¡A pesar de que no tiene su posición o índice z establecido en absoluto! (W3.org tiene documentación informativa pero bastante densa sobre cómo funciona esto con la propiedad de opacidad)

Recuerde, nunca agregamos un valor de índice z al bloque blanco, solo posición: relativo. Esto fue suficiente para colocar el bloque blanco encima de los gatos no posicionados.

Pero dado que el elemento .bottom-cat actúa como si estuviera relativamente posicionado con el índice z: 0, al transformarlo lo ha posicionado en la parte superior del bloque blanco.

La solución a esto es establecer la posición: relativa y establecer explícitamente el índice z en al menos el bloque blanco. Podría ir un paso más allá y establecer la posición: relativa y un índice z más bajo en los elementos cat, solo para estar más seguro.

.content__block {
   posición: relativa;
   índice z: 2;
}
.cat-top, .cat-bottom {
   posición: relativa; índice z: 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 su índice z no funciona. Este es un poco más complejo, porque involucra elementos primarios y secundarios.

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 todavía está en la parte superior 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:

.contenido {
   posición: relativa;
   índice z: 1;
}
.modal {
   posición: fija;
   índice z: 100;
}
.side-tab {
   posición: fija;
   índice z: 5;
}

Todos los elementos tienen su posición establecida, y la pestaña lateral tiene un índice z de 5, que lo coloca en la parte superior del elemento de contenido, que está en el índice z: 1.

Entonces, el modal tiene un índice z: 100, que debería colocarlo encima de la pestaña lateral en el índice z: 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 está limitado 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:

    

Mirando 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 de í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 índice z de 100 solo tiene un efecto dentro de su elemento primario, el elemento de contenido. Por ejemplo, si hubiera otros elementos secundarios que fueran hermanos del modal, sus valores de índice z los colocarían uno encima del otro.

Pero el valor del índice z de esos elementos secundarios no significa nada fuera del elemento primario, porque el elemento de contenido primario tiene su índice z establecido en 1.

Por lo tanto, sus elementos secundarios, incluido el modal, no pueden salir de ese nivel de índice z.

(Puede recordarlo con esta metáfora un poco deprimente: un niño puede estar limitado por sus padres y no puede liberarse de ellos).

Hay un par de soluciones a este problema:

Solución: mueva el modal fuera del contenido principal y al contexto principal de apilamiento de la página.

El marcado corregido se vería así:

Ahora, el elemento modal es un elemento hermano de los otros dos. Esto pone 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 abajo:

  • modal (índice z: 100)
  • pestaña lateral (índice z: 5)
  • contenido (índice z: 1)

Solución alternativa: elimine el posicionamiento del contenido para que no limite el índice z modal.

Si no desea o no puede cambiar el marcado, puede solucionar este problema eliminando la configuración de posición del elemento de contenido:

.contenido {
   // Sin posición establecida
}
.modal {
   posición: absoluta;
   índice z: 100;
}
.side-tab {
   posición: absoluta;
   índice z: 5;
}

Dado que el elemento de contenido ahora no está colocado, ya no limitará el valor del índice z modal. Por lo tanto, el modal abierto se colocará en la parte superior del elemento de pestaña lateral, debido a su mayor índice z de 100.

Si bien esto funciona, personalmente elegiría la primera solución.

Porque si por algún motivo 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 hayas encontrado útil este tutorial! En resumen, la mayoría de los problemas con el índice z se pueden resolver siguiendo estas dos pautas:

  1. Verifique que los elementos tengan su posición establecida y sus números de índice z en el orden correcto.
  2. Asegúrese de no tener elementos primarios que limiten el nivel del índice z de sus hijos.

Recursos:

  • W3.org: Transparencia: la propiedad "opacidad"
  • W3.org: especificando el nivel de pila
  • Red de desarrolladores de Mozilla: el contexto de apilamiento
  • PhilipWalton.com: lo que nadie le dijo sobre el índice Z
  • Smashing Magazine: la propiedad CSS del índice Z

¿Quieren más?

Leer más tutoriales en mi blog, coder-coder.com.
Regístrese aquí para recibir correos electrónicos sobre nuevos artículos.
Únase a más de 25,000 personas: siga a @thecodercoder en Instagram.