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).