2 min de lectura

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

Consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original. Las demás objetos respetarán su posicionamiento normal.

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.

Para posicionar la imagen de forma absoluta, el navegador realiza los siguientes pasos:

  1. Obtiene la lista de elementos contenedores de la imagen
  2. Recorre la lista de elementos desde el más cercano a la imagen hasta terminar en el <body> buscando el primer elemento contenedor que esté posicionado.
  3. El navegador establece directamente el origen de coordenadas en la esquina superior izquierda del contenedor.
De modo que para que el posicionamiento absoluto tome como origen su padre inmediato, este debe tener un posicionamiento fijado distinto a normal.

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 por encima de todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

 

En la imagen anterior podemos ver que al flotar la caja 1 hacia la izquierda, la caja 2 se tapa, puesto que la caja 1 se considera que esta por encima de los demás elementos.

Cuando se aplica el posicionamiento flotante a varios elementos, estos respetarán los demás elementos flotantes y se acomodarán en el mejor lugar posible.

Si el elemento flotante no “cabe” en la línea, brincará a la siguiente línea cumpliendo con buscar su mejor posición.

Para generar elementos ajenos a los comportamientos del posicionamiento flotante de otros elementos se utiliza la propiedad clear, la cual permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante.

Compartir

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here