¿En qué se diferencian position: relative y position: absolute y cuándo usar cada uno?

Distingue entre position: relative (posiciona respecto a su lugar original) y position: absolute (respecto a un ancestro posicionado o el viewport).

position: relative y position: absolute son dos valores de la propiedad position en CSS que controlan cómo se ubica un elemento, pero tienen diferencias fundamentales en su comportamiento y contexto de referencia:

position: relative (posición relativa):

Referencia: El elemento se posiciona en relación a su posición original en el flujo normal del documento.
Flujo del documento: Aunque utilices las propiedades top, right, bottom o left para desplazarlo, el espacio que el elemento ocupaba originalmente se mantiene reservado. Los demás elementos no se reajustan para ocupar ese espacio vacío.
Uso común:
- Para realizar pequeños ajustes visuales o desplazamientos de un elemento sin afectar al layout general.
- Muy importante: para crear un nuevo contexto de posicionamiento para sus elementos hijos que tengan position: absolute.

position: absolute (posición absoluta):

Referencia: El elemento se posiciona en relación a su ancestro posicionado más cercano. Un «ancestro posicionado» es cualquier ancestro que tenga una propiedad position con un valor distinto de static (es decir, relative, absolute, fixed o sticky). Si no encuentra ningún ancestro posicionado, tomará como referencia el bloque contenedor inicial (generalmente la etiqueta <html>).
Flujo del documento: El elemento se extrae completamente del flujo normal del documento. Esto significa que el espacio que ocupaba originalmente desaparece, y los demás elementos se comportan como si el elemento absoluto no existiera.
Uso común:
- Para superponer elementos (por ejemplo, un icono sobre una imagen, un menú desplegable, una ventana modal).
- Para colocar elementos en una ubicación precisa dentro de un elemento contenedor (que usualmente tendrá position: relative).

Cuándo usar cada uno:

Utiliza position: relative cuando necesites desplazar ligeramente un elemento desde su posición normal o, más frecuentemente, para establecer un marco de referencia para un elemento hijo con position: absolute.
Utiliza position: absolute cuando quieras que un elemento «flote» sobre otros, se posicione con precisión dentro de un contenedor de referencia y no afecte al flujo de los demás elementos.

.contenedor-padre {
  position: relative; /* Establece el contexto de posicionamiento */
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

.elemento-absoluto {
  position: absolute;
  top: 20px;       /* 20px desde el borde superior del .contenedor-padre */
  right: 20px;     /* 20px desde el borde derecho del .contenedor-padre */
  background-color: lightcoral;
  padding: 10px;
}Lenguaje del código: PHP (php)

En este ejemplo, .elemento-absoluto se posiciona dentro de los límites de .contenedor-padre porque este último tiene position: relative.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante