Posicionamiento estático y relativo

La propiedad position controla cómo se coloca un elemento en el flujo del documento. Sus cinco valores son: static, relative, absolute, fixed y sticky.

Todos los elementos tienen position: static de forma predeterminada. Los elementos estáticos siguen el flujo normal del documento: los elementos de bloque se apilan verticalmente y los elementos en línea fluyen de izquierda a derecha. Las propiedades de desplazamiento (top, right, bottom, left) no tienen ningún efecto.

position: relative mantiene el elemento en el flujo normal, pero permite desplazarlo con respecto a su propia posición normal mediante top, right, bottom y left.

Cuando utiliza position: relative con desplazamientos, el elemento se mueve visualmente, pero su espacio original en el diseño sigue reservado. Los demás elementos no ocupan ese espacio vacío.

Las propiedades de desplazamiento mueven el elemento desde su punto de referencia:

• top: lo mueve hacia abajo desde el borde superior
• left: lo mueve hacia la derecha desde el borde izquierdo
• Los valores negativos invierten la dirección

z-index solo funciona en elementos posicionados (no en elementos estáticos). Si necesita controlar el orden de las capas, establezca al menos position: relative.

El uso más importante de position: relative es convertir un elemento en el bloque contenedor de sus elementos secundarios posicionados de forma absoluta, incluso sin valores de desplazamiento.

Combinar position: relative con transform crea un nuevo contexto de apilamiento. El elemento permanece en el flujo, pero puede transformarse visualmente.

Evite establecer position: relative en todos los elementos. Esto crea contextos de apilamiento que pueden complicar la gestión de z-index. Utilícelo únicamente cuando necesite desplazamientos o anclar elementos secundarios posicionados de forma absoluta.

Como el posicionamiento relativo no afecta al flujo del diseño, puede animar top/left de forma segura para crear efectos visuales, aunque animar transform: translate() ofrece un mejor rendimiento.

En DevTools, consulte el panel Computed para ver el valor efectivo de position. El diagrama del modelo de caja muestra las coordenadas exactas de desplazamiento aplicadas.

¿Qué ocurre con el espacio de diseño de un elemento cuando se aplica position: relative; top: 20px?

position: static es el valor predeterminado: no admite desplazamientos ni apilamiento. position: relative permite desplazar el elemento desde su propia posición y conserva su espacio en el diseño. Su función más importante es actuar como bloque contenedor de los elementos secundarios posicionados de forma absoluta.