CSS 2: Posicionamiento

Los elementos de una página web están contenidos en una caja rectangular, de acuerdo con el modelo de caja. La manera en que los diferentes elementos de una página web se distribuyen en la pantalla dependen del esquema de posicionamiento elegido.

Existen tres esquemas de posicionamiento:

El esquema normal es el que se aplica por omisión. En el esquema de posicionamiento normal, los elementos se muestran en la pantalla en el mismo orden en que se encuentran en el código fuente de la página. Los elementos pueden ser elementos de bloque o elementos en línea. Los elementos en línea están contenidos dentro de elementos de bloque y los elementos de bloque ocupan todo el ancho de la página y la altura necesaria para mostrar todo su contenido.

El esquema flotante es el que permite que un elemento no ocupe todo el ancho de la pantalla y se muestre a la izquierda o a la derecha de la página con otros elementos a su lado. En el esquema de posicionamiento flotante, los elementos se muestran en la pantalla en el mismo orden en que se encuentran en el código fuente, pero pueden estar desplazados a derecha a izquierda. Para asignar el esquema de posicionamiento flotante a un elemento se utiliza la propiedad float.

El esquema absoluto permite asignar cualquier posición a un elemento en la página (no solamente a izquierda o derecha como en el esquema flotante). En el esquema de posicionamiento absoluto, los elementos pueden mostrarse en la pantalla en un orden diferente al que se tienen en el código fuente, e incluso superponerse. Para asignar el esquema de posicionamiento absoluto a un elemento se utiliza la propiedad position.


La imagen siguiente muestra cómo podrían mostrarse cuatro bloques de una página que en el código fuente estuvieran seguidos. En el esquema normal los bloques se muestran en el mismo orden que en el código fuente; en el esquema flotante se puede colocar un bloque a la izquierda (el bloque 2) y el bloque siguiente se puede colocar a la derecha del flotante; en el esquema absoluto los bloques se pueden colocar en cualquier orden y posición.

Esquemas de posicionamiento CSS