Unidad 18. Diseño de página. Maquetación web (IV)

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

Como vimos en el tema relacionado con capas, Dreamweaver nos permite tratar los divs con posicionamiento absoluto de forma especial, a través de los Divs PA.

Podemos insertar una capa con posicionamiento absoluto directamente a través del menú Insertar, opción Objeto de diseño, Div PA.

Cuando un elemento (no solo divs) tiene posicionamiento absoluto, en Dreamweaver se muestra así si están seleccionados:

Esto nos permite establecer su tamaño y posición simplemente arrastrándolos o estirando de sus bordes, directamente sobre la vista de diseño. Además, todas estas propiedades aparecerán en el inspector de propiedades.