¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

16.2.15

Posicionar elementos HTML con CSS: Float vs Absolute

A continuación vamos a tratar sobre un tema que tiene dividida a la comunidad de maquetadores web: ¿Cómo posicionamos elementos a través de CSS?

A grandes rasgos hay dos maneras de posicionar elementos:

- La primera manera es a través de la propiedad position: absolute y posicionando el elemento con las propiedades top, bottom, leftright.

Para que resulte efectivo solemos poner el elemento dentro de un padre con posicionamiento relativo (ya que sino se posiciona con respecto al documento).

Al usar este tipo de posicionamiento, lo que hacemos es sacar el elemento fuera del flujo natural de contenidos de la página. No cabe duda que de esta manera es mucho mas sencillo clavar el diseño al píxel, además de resultar mas rápido a la hora de desarrollar.

- La segunda opción de posicionamiento es mediante la propiedad float: left, right. Al usarlo mantenemos el elemento dentro del flujo natural de contenidos de la página.

Lo primero que hay que decir es que las dos opciones son correctas y para elegir correctamente, simplemente usaremos la siguiente regla:

Si el elemento interactúa con otros, usa float, si es independiente y no interactúa, usa posicionamiento absoluto.

Al usar float hacemos que el elemento "empuje" a otro a la siguiente línea, lo que evita una posible pérdida de información. Es muy recomendable utilizarlo en textos que provienen de datos dinámicos, textos que se van a traducir a otros idiomas, iconos que cambian de tamaño y desplegables.

1 comentario:

  1. "regla:

    Si el elemento interactúa con otros, usa float, si es independiente y no interactúa, usa posicionamiento absoluto".

    (y)

    ResponderEliminar