Frontend Training

CSS - Position

La property position especifica el método de posicionamiento para un elemento.

Junto con las properties top, right, bottom y left determinan la ubicación final del elemento.

position: static;

Los elementos HTML son posicionados estáticos por defecto.

Los elementos posicionados como estáticos no son afectados por las properties top, bottom, left, y right.

Este elemento tiene
position: static;

position: relative;

Estos elementos son posicionados relativos a su posición normal.

Configurar las properties top, right, bottom, y left de un elemento posicionado como relativo hará que el elemento se aleje de su posición normal.

Es mala práctica usar las properties top, right, bottom y left en un elemento relativo ya que se puede terminar con efectos no deseados. En general se puede usar otra solución para lograr el mismo efecto, como combinar padding y margin.
Este elemento tiene
position: relative;
con
left: 80px;

position: fixed;

Estos elementos son posicionados relativos al viewport, lo cual implica que va a quedarse en el mismo lugar incluso si la página es scrolleada.

Un elemento fixed no deja espacio donde normalmente hubiera estado posicionado (por eso no vemos el elemento abajo de este texto).

Este elemento tiene
position: fixed;
con
bottom: 0; right: 0;

position: absolute;

Estos elementos son posicionados relativos a su padre posicionado más cercano.

Un elemento se dice "posicionado" cuando su posición es cualquiera menos la posición por defecto static.

Si un elemento absoluto no tiene un padre posicionado, entonces se posiciona relativo al body del documento y se mueve de acuerdo al scroll de la página.
Este elemento tiene
position: relative;
Este elemento tiene
position: absolute;
con
bottom: 20px; left: 80px;