Mi enfoque para usar z-index

La última vez que llegué al punto, la gente pareció apreciarlo. Asi que…

La versión corta

Categorice todos los usos del índice z como locales o globales.

Local : elementos que se deben representar encima de un elemento hermano o cercano

  • Debe estar contenido en un nuevo contexto de apilamiento
  • Raramente tendrá un z-index mayor que 1

Global : elementos que deben representarse en la parte superior de los elementos en otra parte de la página

  • Los valores del índice z deben declararse como variables globales en una ubicación central
  • En general, debe haber menos de diez en un sitio

La versión larga

Para configurar la escena, revisaré un ejemplo simplificado que resalta algunos de los problemas que puede resolver el z-index y la causa. Aquí está el codepen , si tienes curiosidad.

esquema de color: verde, mintcream y honeydew

Y aquí hay un pequeño menú desplegable para cosas relacionadas con el perfil.

Pero sabes qué, ese encabezado realmente no 'explota'. Necesita más elegante. Creo que podría darle una box-shadow :

Espera, le di una sombra. ¿Dónde está la sombra? ¡Quiero una sombra!

Oooh, ya veo, el div que viene después del encabezado en el DOM tiene un color de fondo (blanco), y está sentado en la parte superior de la sombra del encabezado.

Le daré al encabezado un z-index: 1 . Pero z-index , en las palabras inmortales de la especificación CSS , "se aplica a: elementos posicionados". Entonces, necesitaré agregar position: relative también.

Mira, un encabezado con una sombra.

Ahora, para verificar que este cambio no haya roto nada más. Estoy bastante seguro de que no habrá roto nada más.

Tío.

Francamente, tuve suerte de que funcionara sin uno para empezar. Es casi como si quisiera que esto sucediera. Déjame darle un z-index de 1 .

Pro-tip: utilice el triángulo Unicode (?) en lugar de faff con extraños hacks de triángulos de borde CSS.

Ah, eso es mejor. Hasta ahora, tan fácil.

A continuación, quiero crear un efecto para que cuando pase el puntero sobre un producto, agregue una sombra para que sepa que estoy sobre un producto.

Se ve muy bien. Pero, no, si el siguiente elemento de esta lista tiene un fondo, cubre la sombra inferior, el mismo problema que tuve con el encabezado.

Adivina quién, al res-cue …

¡Es z-index!

Añadiré z-index: 1 en vuelo estacionario (y abandonaré mi deseo de hacer la transición de la sombra).

Creo que probablemente has adivinado lo que sucederá cuando pase el mouse sobre un producto mientras el menú de perfil está abierto.

Estoy harto de este violín, y soy un desarrollador web inteligente, así que voy a darle a ese sangriento menú de perfil un z-index de 99999 , así que ahora que siempre estará al tanto de todo (porque 99999 es famoso el número racional más grande).

Y finalmente, por fin, tengo todo apilado correctamente.

Ahora puedo decir con total certeza que z-index nunca me volverá a molestar porque estoy seguro de que nunca se requerirán cambios en la interfaz y que nunca querré que se coloque nada encima de ese menú desplegable.