Unidad 7. Maquetación web (IV)

7.6. Posicionamiento absoluto

Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del elemento en la página.

Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado un posicionamiento absoluto no deja un hueco en la página. Podemos decir que el resto de elementos lo ignoran, y se colocan como si no existiese.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.

La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo contiene. El elemento contenedor será el más cercano que haya con posicionamiento no estático. Si no hay ninguno, se utilizará el body.

Para definir la posición utilizamos top para referirnos a la distancia entre el borde superior del elemento posicionado y el borde superior del elemento contenedor. Por lo tanto left será la distancia entre los lados izquierdos, right entre los lados derechos y bottom entre los lados inferiores.

Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un punto en vertical (top o bottom) y un punto en horizontal (right o lef). En el siguiente elemento, todas las cajas tienen position: absolute; witdth: 60px; height: 60px y un borde. Para cada una hemos cambiado la posición. Además, a la caja que contiene a todas, le hemos dado position: relative; para que las cajas de dentro tomen su posición a partir de ella.

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la página. Por ejemplo:

div#columna_izquierda {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 50%;
	}
div#columna_derecha {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 50%;
	}

Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las contenga).

Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.

div#columna_izquierda {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 200px;
	}
div#columna_derecha {
		position: absolute;
		right: 0;
		left: 200px;
		top: 0;
		height: 100%;
	}

Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posición de los dos lados, en vez de un lado y el ancho.