position: static, relative y absolute

Grid y Flexbox organizan el flujo; position lo ROMPE con intención: badges que flotan sobre esquinas, iconos dentro de inputs, decoraciones que se salen del marco. Es la tercera herramienta de layout — y la más malinterpretada. Hoy la entiendes de raíz, empezando por el dúo relative/absolute.

static: el default que nunca escribes

Todo elemento nace con position: static: vive en el flujo normal y las propiedades de offset (top, left...) lo IGNORAN. Si alguna vez un top: 20px "no hace nada", ya sabes: el elemento es static.

relative: me muevo, pero guardo mi puesto

Dos usos y solo dos: microajustes visuales (bajar un icono 2px para alinearlo ópticamente) y — el 95% de las veces — ser el ancla de un hijo absolute. Eso enseguida.

absolute: me salgo del flujo y me anclo a un ancestro

La regla de oro: un elemento absolute se posiciona respecto a su ancestro posicionado más cercano (el primero que no sea static). Sin ninguno, se ancla a la página entera — el origen del clásico "¡mi badge apareció en la esquina del navegador!". Por eso el dúo es inseparable: padre relative (no se mueve, solo declara "mídete contra mí"), hijo absolute.

<div class="tarjeta">
<span class="badge">NUEVO</span>
<h3>Curso de Grid</h3>
<p>El badge flota en mi esquina porque YO soy su marco (relative). No empujó nada: está fuera del flujo.</p>
</div>

body { font-family: system-ui; padding: 24px; background: #f8fafc; }
.tarjeta { position: relative; background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; max-width: 320px; }
.badge { position: absolute; top: -10px; right: 12px; background: #b45309; color: white; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
h3 { margin: 0 0 8px; color: #1e293b; }
p { margin: 0; font-size: 14px; color: #475569; line-height: 1.5; }

Nota el top: -10px: los offsets aceptan negativos, y así el badge muerde el borde de la tarjeta — el detalle que lo hace verse intencional.

Mini-reto

Ponle a las noticias de tu periódico un badge de categoría ("DEPORTES", "CULTURA") flotando en la esquina de cada tarjeta con el dúo relative/absolute. Luego quita el relative del padre y observa el caos — entender el error en ambiente controlado te inmuniza.

Qué sigue

Dominas el anclaje local. La próxima lección son los posicionados GLOBALES: fixed (el header que te persigue al scrollear) y sticky (la sección que se pega al llegar al borde) — los dos que viven en función del viewport.