Position: absolute

En este ejemplo vamos a usar un elemento DIV que contiene la imagen de una mancha azul con las siguientes propiedades:

DIV#ejemplo { position: absolute;
              top: 10px;
              left: 300px}

Si observa el código de esta página, el DIV que contiene la imagen está ubicado justo antes de este párrafo, pero, como el bloque de contención de este DIV es la página (el elemento BODY), la imagen aparecerá a 10px por debajo y a 300px hacia la derecha de la esquina superior izquierda de la página.

Ahora bien, si el DIV de nuestro ejemplo se encontrara incluido dentro de otro DIV posicionado, este último se convertiría en el bloque de contención y entonces la imagen se ubicaría con relación a él (y no con respecto a la página).

 

 

Este DIV, que tiene un fondo gris para su identificación, está posicionado relativamente. Esto no significa necesariamente que deba ser movido de su ubicación normal, simplemente basta que tenga asignada la propiedad position: relative para que se convierta en el bloque de contención de nuestro ejemplo. De este modo, la imagen se ubica a 10px por debajo y a 300px hacia la derecha de la esquina superior izquierda de este DIV (no ya de la página).

(En el código, el DIV aparece justo antes de este párrafo)

Para confirmar, vamos a utilizar un elemento DIV como el anterior pero sin definir su posición y dentro de él otro DIV con la imagen de una flecha y estas propiedades:

DIV#ejemplo2 { position: absolute;
               top: 10px;
               left: 430px}

Esto es lo que sucede: el DIV con la imagen de una flecha amarilla se ubicará con relación a la esquina superior izquierda de la página (a continuación de la imagen de la mancha) porque este DIV no está posicionado.

(En el código, el DIV aparece justo antes de este párrafo)

Esto debe quedar en claro: la ubicación de un elemento con position:absolute se fija con respecto a la esquina superior izquierda de la página, a menos que ese elemento tenga un antepasado posicionado (es decir, con un valor relative, absolute o fixed para position), en cuyo caso su posición se fija con respecto a la esquina superior izquierda de ese antepasado.

Se debe tener en cuenta que el valor absolute (como así también fixed) provocan que el elemento no tenga ninguna influencia sobre los elementos siguientes. Veamos un ejemplo: a continuación tenemos cuatro párrafos, el primero y el tercero tienen la propiedad position. Para el primero, el valor de position es relative y para el tercero es absolute. No se usa ninguna otra propiedad (salvo el color, para diferenciarlos) de modo que ambos párrafos mantienen su posición dentro del documento.

Un párrafo con position:relative

Otro párrafo

Un párrafo con position:absolute

Otro párrafo

Lo que sucede es que el tercer párrafo (position:absolute), a pesar de mantener la misma posición, ha sido quitado del flujo normal de la página y el párrafo siguiente ocupa su lugar (provocando la superposición de ambos).