Posicionamiento

position: static

Es el posicionamiento por defecto de todos los elementos. No nos permite acceder a las propiedades top, right bottom y left.

position: relative

Un elemento posicionado relativamente lo está con respecto a su posición original. El origen (0, 0) es el punto superior izquierdo
de su posición original. Mantiene la posición del resto de los elementos como si estuviera posicionado estáticamente.

A diferencia de margin, los atributos de posicionamiento top, right bottom y left no empujan a los demás elementos

position: absolute

Un elemento posicionado absolutamente lo está con respecto a la posición del primer elemento padre (o que lo contenga)
que no esté posicionado estáticamente, o del documento si no hay ninguno.
El origen (0, 0) es el punto superior izquierdo de este elemento padre.
No mantiene la posición del resto de los elementos, sino que se sale del flujo del documento y deja libre su posición.

En este caso, el primer elemento que lo contiene no está posicionado relativamente,
por lo que sigue buscando en la jerarquía de elementos hasta encontrar uno.

En este otro, el elemento padre que los contiene sí está posicionado relativamente

A diferencia de los elementos posicionados relativamente, los márgenes de los posicionados absolutamente no empujan a otros elementos,
sólo se empujan a sí mismos con respecto al elemento a partir del cuál se posicionan.

Posicionar elementos absolutamente es muy útil a la hora de incluir elementos dentro de imágenes

LOREM IPSUM

En este caso, el elemento h3 está posicionado absolutamente con respecto a su elemento padre, que también
tiene posición absoluta.

position: fixed

Funciona igual que un elemento posicionado absolutamente, sólo que el punto de origen de referencia es siempre el de la pantalla,
se posiciona con respecto a esta y queda fijo en la misma no importa lo que se scrollee.

z-index

Es una propiedad numérica que nos indica cuán adelante está un elemento en el eje z.
Por defecto, los elementos posicionados tienen un z-index: 0, y se colocan uno encima de otro según el orden en que están declarados en el html.
Si queremos alterar este orden, tenemos que modificar dicho índice.