Tipos de posicionamiento

Para determinar el tipo de posicionamiento que tendrán las capas y cualquier otro elemento, se emplea el atributo “position”, que puede tener únicamente cuatro valores: “static”, “relative”, “absolute” y “fixed”. Al colocar alguno de estos valores, las capas se posicionarán en forma diferente.

Una vez determinado el tipo de posicionamiento del elemento, se puede establecer la misma empleando los atributos de posición, que son “top”, “left”, “right” y “bottom” (arriba, izquierda, derecha y abajo, respectivamente). Estos atributos son los que fijan la distancia a la que se posiciona el elemento, y se le debe dar valores en cualquier unidad de medida soportada por CSS, aunque las más usuales son el punto (pt), el pixel (px), porcentajes (%) y la altura de la fuente del elemento (em).

Static

Este valor del atributo “position” es el que tienen todos los elementos por defecto, por lo que cuando no se determina el mismo, es equivalente a darle el valor “static”. En este caso, las propiedades de posicionamiento “top”, “left”, “right” y “bottom” no tendrán efecto. Veámoslo en el ejemplo. A los identificadores “capa1”, “capa2” y “capa3”, les daremos el valor “static” y estableceremos valores a las propiedades de posicionamiento:

Guardaremos el archivo CSS tras modificarlo, iremos al navegador donde hemos abierto el documento HTML y recargaremos la página. Como podrán ver, la página de ejemplo se seguirá viendo exactamente en la misma forma, aún cuando modifiquemos los dos valores de posicionamiento empleados en cualquiera de las capas.

Relative

El valor “relative” hace que los elementos se comporten en la misma forma que cuando tienen el valor “static”, es decir, que seguirán el flujo del documento, pero a diferencia de éste, los elementos podrán recibir los valores de posicionamiento para las propiedades “top”, “left”, “right” y “bottom”, posicionándose a la distancia establecida del elemento anterior o del borde delelemento padre.

Nota: Se llama elemento padre a aquel en el cual el elemento se encuentra anidado. En el ejemplo que estamos llevando adelante, el elemento padre de la capa 1 el body, mientras que el elemento padre de la capa 3 es la capa 2.

Para ver esto en el ejemplo, estableceremos cambios en el archivo CSS, el cual quedará de la siguiente forma y se verá igual que en la imagen que le sigue:

Absolute

El valor “absolute” hace que los elementos se posicionen de acuerdo a la distancia absoluta determinada por las propiedades “top”, “left”, “right” o “bottom”, sin tener en cuenta el flujo del documento. Siempre las distancias establecidas son respecto del elemento padre y no relativas a otros elementos. Siguiendo con el ejemplo, cambiaremos el valor del atributo position de la capa 2:

Ahora, al recargar la página en el navegador, veremos que la página se verá de la siguiente manera:

Como puede apreciarse, la capa 2 se sale del flujo del documento y se establece en la posición determinada por los valores de posicionamiento respecto del elemento padre, el que en este caso es el body. Como resultado, la capa 2 se superpone a la capa 1 y al texto. El orden de la superposición de capas, aun cuando se empleen diferentes tipos de posicionamiento para ellas, es el mismo que tiene el flujo del documento.

Fixed

El valor “fixed” de la propiedad “position” hace que el elemento se comporte en forma igual a que si se le diera el valor “absolute”, solo que en lugar de fijar la distancia respecto del elemento padre, toma las distancias desde el borde de la ventana del navegador. Al igual que cuando se determina el valor “relative”, el elemento sale del flujo del documento. Si la página es más ancha o larga que la ventana del navegador y el usuario varía la posición de la misma empleando las barras de desplazamiento, el elemento cuya propiedad “position” tiene el valor “fixed” no modificará su posición y el usuario la verá siempre en el mismo punto de la ventana.

Para ejemplificar esto, debemos hacer que alguna de las capas tenga dimensiones mayores que la de la ventana del navegador. Para el ejemplo, hemos modificado la altura de la capa 2, y le hemos dado valor “fixed” a la propiedad “position” de la capa 3, quedando el código CSS de la siguiente forma:?

En la siguiente imagen podremos apreciar como se verán las capas, tanto en la parte superior de la página como en la inferior, a la que deberemos ir empleando la barra de desplazamiento vertical. Durante el desplazamiento en uno u otro sentido, podremos ver que la capa 3 mantendrá su posición respecto de la ventana del navegador.