Posicionamiento y capas: relative, absolute, sticky, fixed, z-index y overflow

Aprende a controlar capas, anclajes y recorte de contenido con utilidades de posicionamiento en Tailwind.

El posicionamiento define cómo conviven y se superponen los bloques en una interfaz real.

`relative` establece el contexto, `absolute` posiciona elementos internos, `sticky` mantiene referencia al scroll y `fixed` ancla a viewport.

`inset-*`, `z-*` y `overflow-*` son claves para evitar bugs de capas, recortes inesperados y elementos fuera de lugar.

`aspect-*` ayuda a mantener proporciones consistentes en media cards y previews responsive.

  • Primero decide el contexto; después mueve elementos dentro de ese marco.
  • `relative` no mueve por sí mismo: prepara el contenedor para hijos `absolute`.
  • `sticky` es ideal en barras de contexto y filtros persistentes, mientras `fixed` funciona mejor para acciones globales o floating buttons.
  • Usa `relative` en el bloque padre cuando haya badges o botones flotantes internos.
  • Define `z-*` explícito cuando haya overlays, menús o paneles superpuestos.

Mapa mental de posicionamiento

Primero decide el contexto; después mueve elementos dentro de ese marco.

`relative` no mueve por sí mismo: prepara el contenedor para hijos `absolute`.

`sticky` es ideal en barras de contexto y filtros persistentes, mientras `fixed` funciona mejor para acciones globales o floating buttons.

  • Usa `relative` en el bloque padre cuando haya badges o botones flotantes internos.
  • Define `z-*` explícito cuando haya overlays, menús o paneles superpuestos.
  • Controla recorte con `overflow-hidden/auto` según el comportamiento deseado.

Patrón base con capas y proporción

Una tarjeta media común combina posición, ratio y overflow en pocas utilidades.

Tailwind CSS
05

Posicionamiento y capas: relative, absolute, sticky, fixed, z-index y overflow

Aprende a controlar capas, anclajes y recorte de contenido con utilidades de posicionamiento en Tailwind.

Código del tema: relative | absolute | sticky | fixed | inset | z | overflow | aspect

📘 Teoría

Mapa mental de posicionamiento

Primero decide el contexto; después mueve elementos dentro de ese marco.

`relative` no mueve por sí mismo: prepara el contenedor para hijos `absolute`.

`sticky` es ideal en barras de contexto y filtros persistentes, mientras `fixed` funciona mejor para acciones globales o floating buttons.

  • Usa `relative` en el bloque padre cuando haya badges o botones flotantes internos.
  • Define `z-*` explícito cuando haya overlays, menús o paneles superpuestos.
  • Controla recorte con `overflow-hidden/auto` según el comportamiento deseado.

Patrón base con capas y proporción

Una tarjeta media común combina posición, ratio y overflow en pocas utilidades.

🧪 Aprende probando

Ejemplo Demo interactiva: positioning, inset, z-index, overflow y aspect-ratio Practica patrones de layout reales con `relative/absolute/sticky/fixed` y control de capas.

🏁 Retos

Reto Reto: badge flotante sobre imagen Crea un bloque con contenedor relativo y badge posicionado en la esquina superior derecha.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Tailwind CSS.

Test de Tailwind CSS

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com