5.- Flotar y posicionar.

Caso práctico

Juan. Para la web de "Migas Amigas" el equipo de BK programación decidió al final seleccionar un diseño de dos columnas clásico, para toda la página a excepción de la página de portada.

Para realizar este diseño será necesario que Carlos comprenda cómo se flotan y se posicionan cada uno de los elementos que aparecen en las webs.

A medida que Juan le explica las propiedades y técnicas para flotar y posicionar los elementos, Carlos va tomando conciencia de que esto es, sin duda, lo más complicado a lo que se ha enfrentado hasta ahora en lo que respecta a la tecnología CSS.

Carlos piensa: "Sin duda, me voy a tener que dedicar a fondo".

CSS utiliza el flotado y el posicionamiento para tener el máximo control sobre el lugar que ocupa cada elemento en una página web, sus condiciones de visibilidad y "flotabilidad", así como controlar el manejo de capas.

En los siguientes apartados veremos algunas propiedades de CSS 2.1 que se utilizan para controlar el posicionamiento de los elementos. Estas son: float, clear, position, bottom, top, left, right, overflow, clip, visibility y z-index.

Recomendación

A medida que vayas estudiando de los apartados siguientes también puedes visitar el siguiente enlace de la web de la W3C donde encontrarás un resumen de las propiedades CSS más utilizadas para dar forma a la apariencia de las webs.

Propiedades CSS del modelo de formato visual.

Un término que aparecerá a menudo es “flujo normal”. Cuando hablamos de que los objetos de una página siguen el flujo normal del documento, queremos indicar que la forma en la que se disponen en la ventana del navegador coincide con el lugar que ocupan en el documento escrito (en el código HTML), donde el orden de lectura es de arriba a abajo y de izquierda a derecha.

Flotando y posicionando con CSS conseguimos que los elementos abandonen su flujo normal. De esta forma un elemento que este en el documento escrito más abajo que otro en el documento puede verse en el navegador por encima de él.