¿Qué utilidad crea el contexto para posicionar hijos con `absolute` dentro del mismo bloque?

`relative` en el padre establece el marco de referencia para hijos `absolute`.

Tailwind CSS

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.

¿Cuánto sabes de Tailwind CSS?

📘 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.

Card media con badge absoluto

<article class="relative overflow-hidden rounded-2xl bg-slate-900">
  <img class="aspect-video w-full object-cover" src="/demo.jpg" alt="Demo" />
  <span class="absolute right-3 top-3 z-10 rounded-full bg-emerald-500 px-2 py-1 text-xs font-semibold text-slate-950">Nuevo</span>
</article>

1 Mapa mental de posicionamiento 2 Patrón base con capas y proporción

🧪 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.

⌄