Menu

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:

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

Posicionamiento Absoluto CSS
Posicionamiento Asboluto. Pariente debe de ser relativo.

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?

Posicionamiento flotante

Imagen flota a la izquierda, texto fluye a la par de el

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?

Diseño Web Flotante

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

Posicionamiento Relativo
El cuadrado naranja borroso es donde debería de ir

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.

5 Comentarios

  1. Ricardo Rivera
    1

    Muchas gracias por la información, soy algo empírico, pero siempre e utilizado estos atributos …………… y pues ahora los entiendo mucho mejor …………..

    • Natalie
      1.a

      Hola Ricardo!
      Muchas gracias por su comentario, esperamos que le sea de bastante provecho el artículo.
      Saludos

  2. andres
    2

    muy bonita la teoria pero no sirve de nada

    • mentor-admin
      2.a

      Alguna razon en particular?

Deje Su Respuesta