Por qué z-index a veces no hace nada en CSS

z-index solo ordena hermanos dentro del mismo contexto de apilamiento, y muchas cosas crean uno.

.page { position: relative; z-index: 0; }

/* nuevo stacking context: el modal de abajo nunca puede quedar encima */
.hero {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

.hero .badge { position: absolute; z-index: 9999; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.faded { opacity: 0.99; }

Cómo funciona

1. Un elemento posicionado con z-index inicia su propio contexto.
2. También opacity menor a 1, transform, filter y will-change.
3. Un hijo nunca puede escapar del lugar de su padre en el orden.

Palabras clave y builtins usados aquí

• inset
• opacity
• position
• transform
• translateZ

El intento, en números

Líneas

18

Caracteres a escribir

317

Tokens

70

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 49 segundos.

Escribe este fragmento

Paso 4 de 7 en Posicionamiento; paso 20 de 24 en Flexbox y grid.

← Anterior Siguiente →