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.

Este ha sido un repaso general a los distintos atributos de hojas de estilo que están implicados en lo que se conoce como posicionamiento en CSS. Para la referencia de los interesados, recomendamos la lectura de los artículos mencionados al principio del Manual de CSS, en especial el artículo sobre atributos para capas.

En el siguiente artículo veremos distintos casos de uso del atributo position, que es clave para entender el posicionamiento CSS.