CSS Position

La propiedad position define cómo se ubica un elemento en el flujo del documento. Es una de las herramientas más importantes para afinar el layout y el diseño.

Valores de position

CSS position puede tomar distintos valores, cada uno con un comportamiento diferente en el diseño.

Valor	Descripción
static	Valor predeterminado. El elemento se coloca en el flujo normal del documento.
relative	El elemento se desplaza respecto a su posición normal usando top, left, right, bottom.
absolute	El elemento se posiciona en relación al primer contenedor que no sea estático.
fixed	El elemento se fija en relación a la ventana del navegador y no se mueve al hacer scroll.
sticky	El elemento permanece fijo durante el scroll hasta cierto punto, luego vuelve al flujo normal.

Posicionamiento absoluto

El posicionamiento absoluto permite definir con precisión dónde debe ubicarse un elemento dentro de su contenedor padre.

En el ejemplo, la caja roja está ubicada en la esquina superior derecha de la caja gris contenedora.

Posición sticky

La posición sticky es útil en barras de navegación, ya que mantiene el elemento en la parte superior al hacer scroll, luego vuelve al flujo normal.

Consejos para usar position

El uso correcto de position es esencial para crear layouts precisos y responsivos.

Siempre asigna position: relative al padre si quieres posicionar un hijo con absolute.
Usa fixed con cuidado, ya que puede tapar contenido al hacer scroll.
Sticky es especialmente útil para barras de navegación y cabeceras.