En el Manual de CSS de DesarrolloWeb.com hemos tratado en varios puntos el posicionamiento CSS, con las distintas técnicas para crear y colocar partes de la página de manera absolutamente precisa. En todos los casos explicamos diversos detalles desde distintos enfoques que sin duda dan un visión particular sobre el posicionamiento de elementos en páginas web. Por ejemplo, ya hemos hablado sobre lo que son las capas, y también los atributos para su posicionamiento, así como otros asuntos como la maquetación CSS o el atributo overflow.

No obstante, quedaba pendiente ofrecer unas explicaciones generales y con detalle sobre el posicionamiento CSS, que puedan dar a los lectores una idea global sobre este interesante asunto. Sin duda es un tema que merece la pena estudiar y también practicar. En este artículo vamos a ofrecer diversos conocimientos teóricos y a la vez estamos preparando un vídeo en el que mostraremos por la práctica las distintas opciones para posicionamiento web.

Atributos para posicionamiento CSS

Existen numerosos atributos para posicionar con CSS cualquier elemento de la página. Además, a medida que van siendo presentadas nuevas versiones de CSS, estos atributos y sus posibles valores van aumentando. En CSS 2 contamos con diversos atributos que veremos a continuación.

Atributo position:

Este atributo es, digamos, el principal para definir el tipo de posicionamiento de un elemento. Merece la pena verlo por separado y en detalle. Más adelante lo trataremos en el artículo Tipos de posicionamiento con el atributo position, pero adelantamos que va a permitir varios valores para establecer cómo se posicionará el elemento en la página y si formará parte del flujo normal de HTML. Sus valores posibles son absolute, fixed, relative, static e inherit.

Atributos top, left, right, bottom:

Sirven para indicar la posición de un elemento, cuando éste tiene los valores de position "absolute", "relative" o "fixed" (en otros valores del atributo position estos atributos son ignorados). El atributo top indica la distancia desde el borde superior de la página y left desde el borde de la izquierda. También se puede indicar opcionalmente la posición con bottom, que es la distancia desde abajo y right, que es la distancia desde la derecha.

Atributos float y clear:

Float sirve para establecer que un elemento tiene que "flotar", colocándose los valores "right" o "left" para que floten a izquierda o derecha. Por si sirve de aclaración, que los elementos floten es algo así como lo que pasa cuando definimos el atributo HTML align="right" o align="left" en las imágenes o tablas. Con el atributo clear hacemos que el elemento se coloque en el primer área libre que tenga al lugar donde se indique. Por ejemplo el valor de clear "right" hace que el elemento se coloque en el primer lugar donde no tenga ningún elemento flotando a la derecha. El valor de clear "both" hace que el elemento se coloque donde no tenga elementos flotanto, tanto a la derecha como a la izquierda.

Atributo clip:

Establece un área de recorte de la porción visible de un elemento. Este área de recorte se establece con varios valores, como se detalla en el artículo atributos para capas.

Atributo display:

Especifica el tipo de caja que debe que tener un elemento, que puede ser de diversas formas. Este atributo también tiene bastante utilización y entre los valores más corrientes podríamos destacar: "none", que hace que esa caja o elemento no aparezca en la página ni se reserve espacio para ella. "block", que sirve para que la caja sea un bloque y se muestre en una línea o líneas independientes de otros elementos de la página. "inline", que indica que esa caja tiene que mostrarse en la misma línea que otros elementos escritos antes o después.

Atributo overflow:

Este atributo sirve para decir qué es lo que pasa con los elementos que no caben en una caja debido a las dimensiones de la misma y del contenido que tenga. Se explica con detalle en el artículo Overflow en CSS.

Atributo visibility:

Atributo para definir la visibilidad de un elemento. Con este atributo podemos decir que ciertos elementos de la página sean visibles o invisibles, pero atención, aunque un elemento sea invisible, continúa ocupando espacio en la página. Si queremos que no sea invisible y no se le reserve espacio en la página, hay que utilizar el atributo display con el valor "none". Los valores más corrientes de visibility son: "visible", que hace que el elemento se vea (valor por defecto) y "hidden", que hace que el elemento sea invisible, aunque continúe ocupando espacio.

Atributo z-index:

Este atributo tiene como valor cualquier número entero. Sirve para indicar qué capa se tiene que ver por encima o por debajo de otra u otras, en caso que varias capas estén superpuestas. A mayores valores de z-index, la capa se coloca más al frente, tapando otras capas que tengan valores menores de z-index.

Tipos de posicionamiento con el atributo position de CSS

Hasta ahora se ha introducido el concepto de posicionamiento CSS hemos visto un listado de los atributos existentes hasta CSS 2 para realizar posicionar elementos en la página.

En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que más importancia tiene es position. Vamos a dedicar todo el resto del presente artículo a explicar los distintos valores de position, para explicarlos y proponer unos ejemplos que esperamos acaben de aclarar los posibles usos de este atributo según las necesidades que podamos tener.

Pasemos entonces al tema en cuestión, viendo las posibilidades que nos ofrece este lenguaje. Además, a lo largo de este artículo de DesarrolloWeb.com, vamos a mencionar repetidas veces un concepto que también se explicó anteriormente: el flujo del HTML normal.

position: static

Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de otra manera, static no provoca ningún posicionamiento especial de los elementos y por tanto, los atributos top, left, right y bottom no se tendrán en cuenta.

Podemos ver un ejemplo de posicionamiento static:

<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Esto es una capa con posicionamiento estático</div>
<div style="position: static; background-color: #f9f; padding: 10px; width: 500px;">posicionamiento static, predeterminado.</div>
<h1>CSS</h1>
<div style="background-color: #9ff; padding: 10px; width: 400px;">Posicionamiento static, aunque en este caso no se indicó el atributo position static, pues no hace falta.</div>

position: absolute

El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto. Las capas o elementos con posicionamiento absoluto quedan aparte del flujo normal del HTML, quiere decir esto que no se afectan por el lugar donde aparezcan en el código HTML y tampoco afectan ellas a otros elementos que sí que formen parte del flujo normal del HTML.

Los valores top, left, bottom y right se expresan con unidades CSS y son una distancia con respecto al primer elemento contenedor que tenga un valor de position distinto de static. Si todos los contenedores donde esté la capa posicionada con position absolute (todos sus padres hasta llegar a BODY) son static, simplemente se posiciona con respecto al lado superior de la página, para el caso de top, el inferior para bottom, del lado izquierdo para left o el derecho, en el caso de utilizar right.

Veamos el siguiente código HTML en el que hemos preparado varias capas con position absolute, pero con distintas características:

<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 2;">
Esta capa tiene posicionamiento absoluto.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<div style="position: absolute; width: 820px; height: 30px; padding: 10px; background-color: #ddf; top: 150px; left: 10px; z-index: 1;">Posicionamiento absoluto con z-index menor (la capa aparece por debajo de otras que se superponen con z-index mayor.</div>

<div style="position: absolute; width: 100px; height: 20px; padding: 10px; background-color: #ddf; bottom: 10px; right: 10px;">Posicionamiento absoluto con atributos bottom y right</div>

<h1>Posicionamiento CSS</h1>

La primera capa (llamamos así a los elementos DIV que tienen posicionamiento CSS), tiene como todas las del ejemplo, posicionamiento absoluto. Los atributos top: 100px y left: 30px quieren decir que se posiciona a 100 píxeles de la parte superior de la página y a 30 píxeles de la izquerda. En este caso las distancias top y left para ubicar la capa con position absolute son relativas a la esquina superior izquierda del área disponible del navegador, pues esta capa no está dentro de ninguna otra con posicionamiento distinto de static. Cabe llamar la atención en esta primera capa también sobre el atributo z-index: 2, que servirá para indicarle al navegador la posición de la capa, en la tercera dimensión, con respecto a otras que se puedan superponer, para que sepa cuál tiene que estar debajo y cuál arriba.

La segunda capa podemos ver que tiene un z-index: 1. Eso quiere decir, que en caso se posicione en el mismo lugar se ocultará por la capa primera, que tiene un z-index mayor.

En la tercera capa hemos probado el posicionamiento utilizando los atributos bottom y right, así que la estamos posicionando con respecto a la esquina inferior derecha.

Veamos un segundo ejemplo donde vamos a colocar una capa con posicionamiento absoluto y dentro varias capas también posicionadas con absolute.

<div style="position: absolute; top: 100px; left: 200px; background-color: #ff9966; width: 400px; height: 100px;">
<div style="position: absolute; top: 10px; left:10px;">
Uno
</div>
<div style="position: absolute; top: 10px; left:100px;">
Dos
</div>
<div style="position: absolute; top: 10px; left:200px;">
Tres
</div>
</div>

En este caso la primera capa, que no está dentro de ninguna otra, se posiciona con top y left con respecto a la esquina superior izquierda del espacio disponible en el navegador para el cuerpo de la página. Las capas anidadas están también con position: absolute, pero al estar dentro de otra capa que tiene posicionamiento distinto de static, sus valores top y left son relativos a la esquina superior izquierda de la capa que las contiene.

position: relative

El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML. Además, las capas con posicionamiento relative, admiten los valores top y left para definir la distancia a la que se colocan con respecto al punto donde esté en ese momento el flujo normal del HTML. Como afectan al mencionado flujo del HTML, los elementos colocados después de las capas relative, tendrán en cuenta sus dimensiones para continuar el flujo y saber dónde colocarse. Sin embargo, no se tendrá en cuenta los top y left configurados.

Veamos un ejemplo que quizás aclare las cosas.

<h1>Hola</h1>
<div style="background-color: #606; color:#ffc; padding:10px; text-align: center; width: 300px;">Hola esto es una prueba</div>
<div style="position: relative; width: 300px; padding: 10px; background-color: #066; color:#ffc; top:100px; left: 30px;">capa de posicionamiento relative<br>Se tiene en cuenta esta capa para posicionar las siguientes.</div>
<h2>hola de nuevo!</h2>

Las etiquetas H1 y H2 respetan el flujo HTML y también tenemos un elemento DIV donde no se ha especificado nada en position, luego es static y por tanto también es afectada por el flujo. Hay una capa relative, en el segundo elemento DIV, que también se posiciona con respecto al flujo normal. Como tiene un top y left, aparece un poco desplazada del lugar que le tocaría con respecto al flujo.

El último H2 que aparece se coloca teniendo en cuenta al flujo y tiene en cuenta la capa relative, por eso deja un espacio en blanco arriba, pero no atiende a la posición real de ésta, que se marcó con los atributos top y left.

position: fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.

El lugar donde se "anclará" la capa siempre es relativo al cuerpo (el espacio disponible del navegador para la página). Si utilizamos top y left, estaremos marcando su posición con respecto a la esquina superior izquierda y si utilizamos bottom y right su posición será relativa a la esquina inferior derecha.

Veamos un ejemplo.

<div style="position: fixed; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 1;">
Esta capa tiene posicionamiento fixed.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<div style="position: fixed; width: 700px; height: 30px; padding: 10px; background-color: #d0f; top: 150px; left: 10px; z-index: 2;">Posicionamiento fixed</div>
<h1>Hola</h1>
<div style="position: fixed; width: 100px; height: 30px; padding: 10px; background-color: #0df; bottom: 10px; right: 10px; z-index: 4;">Posicionamiento fixed</div>
<br>
<br>
<br>
<br>
Pongo texto para que se vea!!
<br>
<br>
<br>
Esto hace desplazamiento, con tanto br
<br>
<br>
...
<br>

Se puede ver que hay varias capas con position: fixed y un montón de BR para que la página pueda tener un desplazamiento. Si vemos la página en marcha y hacemos scroll hacia abajo con la barra de desplazamiento, veremos que las capas fixed siempre mantienen la misma posición.

Doctype para el atributo fixed

El valor fixed en el atributo position funciona en todos los navegadores, pero en el caso de Internet Explorer sólo funciona en la versión 7 y superiores. Además, para que funcione en Explorer tiene que declararse un DOCTYPE!. Servirían varios tipos de DOCTYPE!, sin embargo debería declararse con el formato completo. Algo así como:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

O por poner otro ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

position: inherit

El valor inherit indica que el valor de position tiene que heredarse del elemento padre. No funciona en Explorer, al menos hasta la versión 8. Tiene en verdad poca utilidad y además, como no funciona en el navegador más utilizado en la actualidad, tiene aun menos sentido usarlo. Por ello, no ponemos ejemplos.

Conclusión sobre el atributo position de CSS

Esperemos que con las anteriores explicaciones y ejemplos se hayan podido entender bien las distintas posibilidades del atributo position, que es sin duda clave para el posicionamiento CSS. Lo más común para la maquetación web es utilizar el posicionamiento static, pero el posicionamiento absoluto, junto con el posicionamiento fixed, e incluso relative, pueden ser muy útiles para diseños más complejos, donde se requiera una mayor precisión en la colocación de los distintos elementos o las capas.

Además, para hacer efectos Javascript y DHTML en general, se utilizan frecuentemente posicionamientos absolutos. Son muy útiles porque permite que los elementos dinámicos no formen parte del flujo normal del HTML, y por tanto, podemos situarlos en cualquier lugar el área disponible del navegador, e incluso moverlos dinámicamente al cambiar sus propiedades top y left mediante scripts en el lado del cliente. Todos estos comportamientos dinámicos quedan ya fuera de la temática de este texto, aunque los explicamos con detalle en distintos manuales de la sección Javascript a Fondo, de DesarrolloWeb.com.