position decide si un elemento se queda en el flujo normal del documento o si se posiciona respecto a otra cosa (la ventana, un ancestro, su propio lugar original). Es la base de badges, modales, tooltips y headers pegajosos.
static (default) vs relative
static es el comportamiento normal: el elemento va donde le toca en el flujo. relative se comporta igual, pero habilita top/right/bottom/left para desplazarlo visualmente sin sacarlo del flujo (el espacio original queda reservado).
top-2 left-2
<div class="relative top-2 left-2 bg-teal-100">
Desplazado 8px, pero su espacio original sigue reservado
</div>
→El uso más común de relative no es moverlo con top/left, sino convertirlo en el 'contenedor de referencia' para un hijo absolute.
absolute: posicionado respecto al ancestro relative más cercano
Un elemento absolute sale por completo del flujo normal (no ocupa espacio) y se posiciona respecto al ancestro más cercano que tenga position distinto de static — normalmente uno con relative puesto a propósito.
→Si el padre no tiene relative (o absolute/fixed), el hijo absolute se posiciona respecto al <body> — la causa número uno de 'por qué mi badge apareció en la esquina de toda la página'.
fixed: posicionado respecto a la ventana
Similar a absolute, pero siempre relativo al viewport (la ventana del navegador), no a un ancestro — por eso se queda 'pegado' aunque hagas scroll. Típico en botones flotantes o barras de cookies.
→En la página real esto se saldría del bloque de preview — aquí se muestra dentro de un contenedor para que no tape el resto de la guía.
sticky: entre relative y fixed
Se comporta como relative (respeta el flujo) hasta que al hacer scroll llega al punto indicado por top/bottom, momento en el que se 'pega' como fixed dentro de los límites de su contenedor padre.
Header sticky
Contenido 1
Contenido 2
Contenido 3
Contenido 4
Contenido 5
<header class="sticky top-0 bg-white border-b">
Se pega arriba al hacer scroll
</header>
→El nav de esta misma guía usa sticky top-0 — por eso queda visible mientras haces scroll por cada página.
→sticky necesita que el padre NO tenga overflow: hidden — si no funciona, ese suele ser el motivo.
z-index: quién queda encima de quién
Cuando dos elementos posicionados (relative/absolute/fixed/sticky) se superponen, z-index decide el orden de apilado — mayor valor queda más arriba visualmente.
→z-index solo compara elementos dentro del mismo 'contexto de apilamiento' — a veces subir el número no alcanza porque el elemento está atrapado en un contexto distinto (creado por un ancestro con transform, opacity, etc).
inset-0: atajo para las 4 direcciones a la vez
inset-0 equivale a top-0 right-0 bottom-0 left-0 juntos — el patrón típico para hacer que un elemento absolute cubra por completo a su contenedor relative (overlays, capas de loading).