Posicionamientos en CSS; ¿flotamos o no?

Una de las decisiones que se deben de tomar en cuenta a la hora de hacer un diseño Web es elegir como los bloques dentro del sitio van a ser posicionados y hacer una elección entre diseños Web flotantes o absolutos. Actualmente, se tienen 4 tipos de posicionamiento que se utilizan para posicionar elementos de bloque dentro de un sitio Web más uno que sirve como el «de-facto», los cuales son:

• Posicionamiento absoluto
• Posicionamiento flotante
• Posicionamiento relativo
• Posicionamiento estático
• Posicionamiento fijo

Para construir un sitio se deben de usar cualesquiera de estos cuatro, y uno de los dilemas más grandes es «Â¿cuál uso?». Expliquemos uno por uno en detalle.

Posicionamiento absoluto

Este es un posicionamiento de elementos en bloque (conste que la palabra clave es en bloque) que puede ser posicionado en pixeles, porcentaje o en unidades em a la derecha, izquierda, arriba y abajo según Ud lo estilice en su diseño Web. Utiliza como referencia el pariente de dicho elemento al que va a posicionar de forma absoluta. En otras palabras, si tengo un posicionamiento a la izquierda para poner un logo, entonces el pariente de ese div (llámese «logo») sería el elemento body. Veamos la imagen a la izquierda; el div con nombre de logo está posicionado de forma absoluta; los nombres claves de top y left son utilizados; los otros no se usan por el tipo de posición que ocupamos; como bien dijimos el utilizar el valor absoluto es un posicionamiento con respecto al pariente (el cual es body) por lo tanto, si utilizáramos bottom en vez de top, sería con respecto el fondo de la pantalla (dado que body terminaría allí) lo cual es un poco contra productivo.

El utilizar posicionamiento absoluto tiene sus ventajas y desventajas; la desventaja más grande y por la cual es mejor evitarla cuando se hacen diseños Web, es que es rígida. Si el navegador se hace más pequeño o más grande, disminuye-aumenta la cantidad de pixeles con respecto al pariente, y por lo tanto, el diseño puede colapsar o los elementos pueden solapar el uno sobre el otro y esto genera un defecto desagradable.

¿Cuándo es ventajoso utilizar posicionamiento absoluto?

• Cuando los elementos contiguos no tienen una relación, o existe una barrera que los separe claramente.
• Cuando en forma semántica, dentro del código HTML que utiliza, necesita que los bloques estén en una posición diferente que el flujo normal del documento; en otras palabras, si necesita que el footer aparezca dentro del código en la parte superior pero en la pantalla se visualice de forma correcta (abajo).

• 

  En conjunto con posicionamiento relativo, se tiene un control mayor sobre la posición exacta de un elemento; por ejemplo veamos la imagen adjunta y se puede apreciar que existe una caja amarilla y un mono que sale fuera del borde de la misma, si quiere poner un mono como la imagen adjunta dentro del diseño Web final, necesita utilizar una posición absoluta de la imagen del mono mismo, con respecto al pariente (cuyo caso sería el bloque amarillo); podríamos hacer el mismo efecto si se hiciese la caja amarilla como fondo de imagen y el mono incluido y se coloca el texto en base a ello, pero dicha técnica no es muy semántica y además, es muchísimo más pesada que hacerlo a puro fondo de color en el CSS e utilizar el posicionamiento adecuado.

Posicionamiento flotante

Debo decir que mi posición favorita (en diseño Web, claro está malpensados) es la flotante; el nombre mismo lo indica, lo que hace es flotar un elemento a la IZQUIERDA o DERECHA según se estilice, y los demás bloques que interactúan con ella fluyen de forma tranquila a la par del elemento. Usemos otra vez el mono; esta vez ponemos un bloque flotando a la izquierda, y el texto que lo acompaña sigue su flujo «normal» dentro del documento. Flotar es una excelente opción para cuando se ponen imágenes dentro de un artículo o blog; es muy útil y el texto e imagen se complementan bien. Utilizar un posicionamiento absoluto resulta nefasto por que el texto se pondría encima del bloque en caso de encoger la ventana del navegador (ver punto de desventajas en posicionamiento absoluto).

¿Cómo estilizo mi diseño Web con flotantes?

La respuesta, radica en poner un div que actúa como «wrapper» y luego las columnas que flotan, como el ejemplo que pongo a continuación en la imagen de la izquierda; note como el wrapper envuelve a los dos elementos que flotan para que no se «salgan» del diseño y ocupen TODA la ventana del navegador; también cuando se agrande-encoge el navegador, no habrá problema, dado que están contenidos por medio del «wrapper». La imagen ilustra el punto aún mejor, la caja amarilla parte como el contenedor, la azul flota hacia la izquierda y la roja fluye alrededor de lo que flota a la izquierda. El verdadero desafío y esto es una desventaja, es lograr que ambas columnas tengan la misma altura; algunas veces podemos salir airosos de esto al darle los mismos colores a los tres elementos (contenedor, elemento flotante y el que fluye) o necesitamos usar una que otra técnica que si quieren pueden comentármelo abajo y trataré de ayudarles.

Cuales son las ventajas del posicionamiento flotante?

1. Mucho más sencillo de diseñar sitios Web dado que las posiciones son más fáciles de manipular y no existe un desborde entre elementos de bloque siempre y cuando se utilice un contenedor.
2. El pie de la página es más fácil de posicionar por medio de un despeje de cualquier elemento flotante, lo cual hace que el flujo del diseño del sitio vuelva nuevamente a su posición original.

Posicionamiento relativo

El posicionamiento relativo en el diseño Web lo que hace es que un elemento de bloque cuando es posicionado de dicha manera se mueve la cantidad de pixeles hacia cualquiera de las cuatro direcciones que el diseñador Web especifique partiendo como entrada el punto original donde debería de haber quedado, de ahí el nombre; es relativo con respecto a la posición original que debería de caer (a diferencia del absoluto que es con respecto a la posición original de su pariente). La imagen a la izquierda ilustra nuestro punto de mejor manera; el bloque naranja debería de contener las coordenadas de 0,0 pero con un posicionamiento relativo las posiciones se re-acomodan según la posición que se estilice dentro del diseño Web.

Este es un posicionamiento útil por que como bien dijimos con respecto al posicionamiento absoluto, este último necesita un pariente con una posición u absoluta o relativa para que funcione, lo cual lo hace flexible si por ejemplo le asignamos una posición relativa al pariente SIN poner coordenadas (o sea, 0,0) y luego se posiciona el elemento de manera absoluta en base a las coordenadas del que tiene la posición relativa (su pariente).

Posicionamiento estático y fijo.

Ponemos estos dos por que uno se utiliza rara vez y el segundo por que lo considero un poco incómodo para el visitante. El posicionamiento estático es el posicionamiento «estándar» cuando un bloque se incluye dentro del diseño Web.

La última que vamos a discutir es la FIJA (fixed) esta es parecida al absoluto, que tiene las coordenadas de arriba, abajo, izquierda y derecha pero con la variante de que no es con respecto a un pariente, sino con el viewport o ventana del navegador y cuando el usuario utiliza el mouse para arriba o para abajo, ese valor es calculado nuevamente con respecto a la ventana del navegador. Si alguna vez han visto anuncios o publicidad que «sube y baja» conforme Ud navega el sitio, ése es un ejemplo clásico de elementos con posicionamiento estáticos.

Recapitulando

Utilice los posicionamientos flotantes para diseños Web por su flexibilidad e utilice los absolutos-relativos cuando necesita precisión con respecto a los bloques que necesita posicionar nuevamente dentro del diseño.