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.

top: 0;
left: 0;
bottom: 0;
left: 0;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
top: 50%;
right: 0;
top: 70px;
left: 100px;
top: 25%;
right: 25%;

Para insertar una capa con posicionamiento absoluto utilizamos el menú Insertar, opción Div. Lo que nos dará el cuadro de diálogo Insertar Div. En él, debemos establecer un ID para la capa (como se recordará, también podemos utilizar una clase, sin embargo, para los elementos PA es preferible establecer ID). Y después pulsar el botón Nueva regla CSS.

Lo que abrirá el editor de propiedades de CSS, en el que debemos establecer la propiedad position en absolute y su posición horizontal y vertical.

 

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

Capa PA

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.

 


Marzo-2015
Pág. 18.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.