CSS: Posicionamiento

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja, pudiendo realizar efectos muy avanzados y diseños que de otra forma no serían posibles.

El posicionamiento de las cajas se establece mediante la propiedad position (no confundir con la propiedad de fondos 'background-position')

Los posibles valores para esta propiedad son 'static', 'relative', 'absolute', 'fixed' e 'inherit'. A continuación se detalla el comportamiento de cada uno de ellos:

Valor Comportamiento
position: static

Se trata del posicionamiento normal que utilizan los navegadores si no se indica lo contrario.

Si se utiliza este valor se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.

position: relative

Variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original

Corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.

position: absolute

La posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.

position: fixed

Variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.

El desplazamiento se establece de la misma forma que en el posicionamiento absoluto

A continuación se detallará el comportamiento de cada uno de ellos.

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO