¿Qué es z-index?

Cuando tenemos varios elementos en nuestra página web que se superponen, a veces necesitamos controlar el orden en que aparecen.

Por ejemplo, cuando tenemos diferentes menús desplegables y queremos que aparezcan uno encima del otro.

Para esto existe la propiedad CSS z-index, que nos permite controlar el orden de apilamiento de los elementos.

De manera técnica, podríamos decir que lo que vemos en la pantalla es una proyección de un espacio tridimensional. Gran parte del contenido aparece en el plano XY, pero también podemos utilizar el eje Z para crear y acomodar capas de contenido.

🎯 ¿Cómo funciona z-index?

La propiedad z-index tiene el valor auto por defecto, lo que significa que el elemento se superpondrá en el orden en que aparecen en el HTML con otros elementos.

Pero también puede aceptar un número entero (positivo, negativo o cero). Los números más altos hacen que el elemento aparezca por encima de los que tienen números más bajos.

.elemento-superior {
  z-index: 10;
}

.elemento-inferior {
  z-index: 1;
}

En este ejemplo, el elemento con z-index: 10 aparecerá por encima del que tiene z-index: 1.

Veamos un ejemplo práctico:

<div class="caja caja-1">Caja 1</div>
<div class="caja caja-2">Caja 2</div>
<div class="caja caja-3">Caja 3</div>

1
.caja {
2
  position: absolute;
5 collapsed lines
3
  width: 150px;
4
  height: 150px;
5
  padding: 1rem;
6
  color: white;
7
  font-weight: bold;
8
}
9

10
.caja-1 {
3 collapsed lines
11
  background-color: #ef4444;
12
  top: 20px;
13
  left: 20px;
14
  z-index: 1;
15
}
16

17
.caja-2 {
3 collapsed lines
18
  background-color: #3b82f6;
19
  top: 80px;
20
  left: 80px;
21
  z-index: 2;
22
}
23

24
.caja-3 {
3 collapsed lines
25
  background-color: #10b981;
26
  top: 140px;
27
  left: 140px;
28
  z-index: 3;
29
}

En este ejemplo, la caja verde (con z-index: 3) aparece por encima de todas, la azul (con z-index: 2) está en el medio, y la roja (con z-index: 1) queda debajo.

⚠️ Sólo funciona con elementos posicionados

Utilizar valores numéricos en z-index solo funciona con elementos que tienen una posición diferente a static.

Esto significa que debemos usar:

• position: relative
• position: absolute
• position: fixed
• position: sticky

para que z-index tenga efecto.

.mi-elemento {
  position: relative; /* o absolute, fixed, sticky */
  z-index: 10;
}

📊 Valores comunes de z-index

Aunque podemos usar cualquier número, es una buena práctica usar valores que dejen espacio para futuros elementos. Algunos valores comunes son:

• z-index: 0 o z-index: 1: Para elementos base o de fondo
• z-index: 10: Para elementos que deben estar un poco por encima
• z-index: 100: Para elementos importantes como menús desplegables
• z-index: 1000: Para modales o overlays
• z-index: 9999: Para elementos que deben estar siempre al frente (usar con cuidado)

También podemos usar valores negativos:

.fondo {
  position: relative;
  z-index: -1; /* Aparece detrás de otros elementos */
}

📝 Resumen

• z-index controla el orden de apilamiento de elementos superpuestos.
• Solo funciona con elementos que tienen position diferente a static.
• Los números más altos aparecen por encima de los más bajos.
• Es muy útil para modales, menús desplegables y overlays.

🏋️‍♂️ Ejercicio

Imagina que estás creando una tarjeta de perfil de usuario con una imagen de fondo y un botón de “editar” que debe aparecer siempre visible en la esquina superior derecha.

Describe cómo usarías z-index y position para lograr este diseño.

Comentarios

Compartir