CodeForge

Maquetación Web Dinámica / Posicionamiento y capas

position: static, relative y absolute

Teoría18 min20 XP

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

relative.css
.movido {
position: relative;
top: 8px;      /* me desplazo desde MI posición original */
left: 16px;    /* y mi HUECO original queda reservado */
}

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

absolute.css
.tarjeta {
position: relative;   /* "yo soy el marco de referencia" */
}

.badge {
position: absolute;   /* salgo del flujo (mi hueco desaparece) */
top: 8px;
right: 8px;           /* esquina superior derecha DE LA TARJETA */
}

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.

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.

Tu badge con position: absolute apareció en la esquina de la PÁGINA en vez de la esquina de su tarjeta. ¿Qué faltó?

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.