Posicionamiento: relative, absolute, fixed y sticky

De forma predeterminada, los elementos siguen el flujo normal del documento: los elementos de bloque se apilan verticalmente y los elementos en línea fluyen horizontalmente dentro del texto. La propiedad position permite salir de este flujo para crear superposiciones, encabezados fijos e información sobre herramientas.

Todos los elementos comienzan con position: static. Esto significa que se posicionan mediante el flujo normal del documento. Las propiedades top, right, bottom y left no tienen efecto en los elementos estáticos.

position: relative mantiene el elemento en el flujo normal, pero permite desplazarlo de su posición original mediante top, right, bottom y left. Lo más importante es que crea un contexto de posicionamiento para los elementos descendientes con posicionamiento absoluto.

position: absolute elimina el elemento del flujo normal. Se posiciona en relación con su ancestro posicionado más cercano (cualquier posición distinta de static). Si no existe ningún ancestro posicionado, se posiciona en relación con el viewport.

Los elementos posicionados pueden superponerse. Use z-index para controlar el orden de apilamiento. Un z-index más alto queda por encima. Solo funciona en elementos posicionados (no en static). Crea un nuevo contexto de apilamiento.

position: fixed elimina el elemento del flujo normal y lo fija al viewport. No se desplaza con la página. Es perfecto para encabezados fijos, botones de acción flotantes y banners de cookies.

position: sticky es un comportamiento híbrido: el elemento se desplaza con la página hasta alcanzar un umbral (definido con top/bottom); entonces queda fijo. Es útil para los encabezados de sección de tablas largas o para barras laterales que se fijan después del encabezado.

Una técnica clásica consiste en combinar position: absolute; top: 50%; left: 50% con transform: translate(-50%, -50%) para centrar perfectamente un elemento en su elemento principal posicionado.

De forma predeterminada, un elemento secundario con posicionamiento absoluto puede desbordar los límites de su elemento principal. Añadir overflow: hidden al elemento principal recorta todo lo que queda fuera de su cuadro, lo que resulta útil para efectos en imágenes de tarjetas y para recortar insignias.

Algunas propiedades crean contextos de apilamiento involuntariamente: transform, filter, isolation: isolate. Esto puede provocar conflictos con z-index: un elemento con z-index: 9999 puede seguir detrás de otro porque está dentro de un contexto de apilamiento inferior.

relative: desplazamientos y contexto de posicionamiento. absolute: insignias, información sobre herramientas y superposiciones en relación con un elemento principal. fixed: encabezados persistentes, modales y notificaciones emergentes. sticky: encabezados de sección y navegación lateral que acompaña al desplazamiento. Evite position para crear diseños; use Flex o Grid.

Un elemento tiene position: absolute; top: 0; right: 0;. ¿Dónde aparecerá si su elemento principal tiene position: relative?

static es el valor predeterminado. relative aplica desplazamientos sin sacar el elemento del flujo y crea un contexto de posicionamiento. absolute saca el elemento del flujo y lo posiciona respecto al ancestro posicionado más cercano. fixed fija el elemento al viewport. sticky se desplaza y después queda fijo. Use z-index para controlar el orden de superposición.