Cuando un elemento está posicionado mediante position: absolute;, pierde su espacio reservado y su tamnaño. Cuando un elemento pierde su espacio reservado, dicho espacio puede ser ocupado por otro elemento.
Soy el párrafo 1.
Con position:absolute; pierdo mi espacio reservado y mis medidas.
Me coloco dentro de mi elemento contenedor (main) en el lugar que me corresponde.
Si desplazamos un elemento con posición absoluta, lo hará respecto de su elememnto contenedor siempre y cuando este esté posicionado. Los siguientes párrafos se encuentran en el contenedor main y este contenedor no está posiocionados.
Soy el párrafo 2.
Como mi elemento contenedor (main) no está posicionado, me coloco en las coordenadas (0, 0) respecto del elemento html.
Soy el párrafo 3.
Como mi elemento contenedor (main) no está posicionado, me coloco en las coordenadas (-50, -50) respecto del elemento html.
Este div está posicionado.
Soy el párrafo 4.
Como mi elemento contenedor (div) está posicionado (div tiene position: relative;), me puedo colocar en sus coordenadas (0, 0).
Soy el párrafo 5.
Como mi elemento contenedor (div) está posicionado, me puedo colocar en sus coordenadas (100, -50).