Cuando un elemento está posicionado mediante position: relative; mantiene su estacio reservado. Si desplazamos el elemento lo hará respecto de su posición en el HTML como punto de referencia. Para desplazar el elemento disponemos de las siguientes propiedades:
topbottomleftright
Un elemento no se puede posicionar simultáneamente con las propiedades top y bottom ni con left y right. La propiedad top tiene prioridad frente a la propiedad bottom y la propiedad left sobre right.
Soy el párrafo 1. No tengo desplazamiento. Me encuentro justo en mi espacio reservado.
Soy el párrafo 2. Tengo desplazamiento respecto de mi espacio reservado (50px desde arriba y 50px desde la izquierda).
Soy el párrafo 3. Tengo desplazamiento respecto de mi espacio reservado (-50px desde arriba y -50px desde la izquierda).
Soy el párrafo 4. Tengo desplazamiento respecto de mi espacio reservado (50px desde abajo y 50px desde la derecha).
Soy el párrafo 5. Tengo desplazamiento respecto de mi espacio reservado (50px desde arriba y 50px desde la izquierda).
Soy el párrafo 6. Tengo desplazamiento con transición con respecto de mi espacio reservado (-50px desde arriba y 50px desde la izquierda). Molo mucho.