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.
Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.
El estándar de CSS define cinco modelos diferentes para posicionar una caja:
- Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.
- Posicionamiento relativo: 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.
- Posicionamiento absoluto: 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.
- Posicionamiento fijo: 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.
- Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.
El posicionamiento de una caja se establece mediante la propiedad position:
| Propiedad | position |
|---|---|
| Valores | static | relative | absolute | fixed | inherit |
| Se aplica a | Todos los elementos |
| Valor inicial | static |
| Descripción | Selecciona el posicionamiento con el que se mostrará el elemento |
El significado de cada uno de los posibles valores de la propiedad position es el siguiente:
static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedadestop,right,bottomyleftque se verán a continuación.relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedadestop,right,bottomyleft.absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedadestop,right,bottomyleft, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.
La propiedad position no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada float y que se explica más adelante. Además, la propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza.
Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas:
| Propiedades | top, right, bottom, left |
|---|---|
| Valores | unidad de medida | porcentaje | auto | inherit |
| Se aplica a | Todos los elementos posicionados |
| Valor inicial | auto |
| Descripción | Indican el desplazamiento horizontal y vertical del elemento respecto de su posición original |
En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.
En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades right y left) o altura (propiedades top y bottom) del elemento.