Unidad 13. Posicionamiento. Flexbox. Grid (III)



13.3. 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: 80px 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%;

Utilizando este posicionamiento podemos colocar un elemento en una posición concreta pero tiene algunos inconvenientes. Un inconveniente es que los elementos pueden solaparse al cambiar el ancho de la ventana. Por otro lado, el posicionamiento absoluto no es muy útil si queremos diseñar páginas adaptables a todo tipo de anchos. No obstante el posicionamiento absoluto puede ser interesante en algunas situaciones.


Enero-2019 (V 2.0)
Pág. 13.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

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


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