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, left, right.
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.
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.
Entradas
"regla:
ResponderEliminarSi el elemento interactúa con otros, usa float, si es independiente y no interactúa, usa posicionamiento absoluto".
(y)