posicionamientoUtilizando 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. Propiedad float.

El posicionamiento de una caja se establece mediante la propiedad position:


31. Posicionamiento I – Propiedad position –

Comenzamos a ver en este vídeo el tema de los posicionamientos con CSS. Trabajamos con la propiedad position y los valores absolute, relative y fixed.

32. Posicionamientoe II – Absolute y relative –

Seguimos en esta entrega elaborando la práctica del vídeo anterior en la que estábamos trabajando con los posicionamientos absolute y relative. Puedes descargarte los archivos de práctica de la descripción del vídeo anterior.