Posicionamiento: relative, absolute, fixed, sticky, z-index

Ancla insignias, encabezados y modales exactamente donde quieras con las posiciones de CSS y una escala de z-index bien gestionada.

8 min · 3 preguntas

Por defecto, cada elemento es position: static y sigue el flujo del documento. position: relative tiene dos usos: desplazar ligeramente un elemento sin molestar a sus vecinos y, sobre todo, servir de referencia para los hijos con position: absolute. Es el patrón de posicionamiento más común: una insignia promocional, un tooltip o un icono anclado a una esquina de su padre.

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed fija un elemento al viewport, sin importar el desplazamiento: banner de cookies, botón de volver arriba. position: sticky es un híbrido: el elemento se desplaza con normalidad junto con la página y luego se fija en su sitio en cuanto alcanza el umbral que definas (por ejemplo top: 0). Es la solución moderna para los encabezados que permanecen visibles.

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Cuando los elementos se superponen, z-index decide cuál queda encima, pero solo para los elementos posicionados. Adopta una escala documentada en lugar de valores aleatorios: 10 para los menús desplegables, 100 para el encabezado, 1000 para los modales. Cuidado: un padre que crea su propio contexto de apilamiento (por ejemplo con una opacity inferior a 1) limita el z-index de todos sus hijos.

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

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

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Respecto a qué se posiciona un elemento position: absolute?
   • Siempre respecto a la ventana del navegador
   • Respecto al antepasado posicionado más cercano; si no, al viewport
   • Respecto a su padre directo, sea cual sea su posición
2. ¿Cuál es la diferencia entre fixed y sticky?
   • fixed permanece siempre fijado a la pantalla, sticky solo se fija en su sitio a partir de un umbral de desplazamiento
   • sticky se renderiza más rápido que fixed
   • Ninguna, son sinónimos
3. ¿Por qué puede un z-index: 999 no tener efecto?
   • Porque el valor máximo permitido es 100
   • Porque el elemento no está posicionado, o está atrapado en un contexto de apilamiento inferior
   • Porque z-index solo funciona con Grid