Solución:
El posicionamiento absoluto significa que el elemento se saca completamente del flujo normal del diseño de la página. En lo que respecta al resto de elementos de la página, el elemento absolutamente posicionado simplemente no existe. El elemento en sí se dibuja por separado, una especie de “encima” de todo lo demás, en la posición que especifique utilizando el left, right, top and bottom atributos.
Usando la posición que especifique con estos atributos, el elemento se coloca en esa posición dentro de su último elemento antepasado que tiene un atributo de posición de cualquier otra cosa que no sea static (los elementos de la página están predeterminados en estático cuando no se especifica ningún atributo de posición), o el cuerpo del documento (ventana del navegador) si no existe tal ancestro.
Por ejemplo, si tuviera este código:
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
…los <div> se colocaría a 20 px de la parte superior de la ventana del navegador y a 20 px del borde izquierdo de la misma.
Sin embargo, si hiciera algo como esto:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
…entonces el inner div se colocaría a 20 px de la parte superior de la outer div, y 20px desde el borde izquierdo del mismo, porque el outer div no está posicionado con position:static porque lo hemos configurado explícitamente para usar position:relative.
El posicionamiento relativo, por otro lado, es como decir que no hay posicionamiento en absoluto, pero el left, right, top and bottom los atributos “empujan” el elemento fuera de su diseño normal. Sin embargo, el resto de los elementos de la página todavía se distribuyen como si el elemento estuviera en su lugar normal.
Por ejemplo, si tuviera este código:
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
… entonces los tres <span> los elementos se colocarían uno al lado del otro sin superponerse.
Si configuro el segundo <span> para usar el posicionamiento relativo, como este:
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>
… entonces Span2 se superpondría al lado derecho de Span1 en 5px. Span1 y Span3 se ubicarían exactamente en el mismo lugar que en el primer ejemplo, dejando un espacio de 5px entre el lado derecho de Span2 y el lado izquierdo de Span3.
Espero que aclare un poco las cosas.
Posicionamiento relativo: El elemento crea sus propios ejes de coordenadas, en una ubicación desplazada del eje de coordenadas de la ventana gráfica. Es parte del flujo de documentos pero cambiado.
Posicionamiento absoluto: Un elemento busca los ejes de coordenadas disponibles más cercanos entre sus elementos principales. Luego, el elemento se posiciona especificando desplazamientos desde este eje de coordenadas. Se elimina del flujo normal del documento.
Fuente
Definitivamente querrá consultar este artículo de posicionamiento de ‘Una lista aparte’. Ayudó a desmitificar el posicionamiento CSS (que me parecía una locura, antes de este artículo).