Posicionamiento CSS

12/03/20130 comentarios

Hola a todos, hoy os explicare como podemos posicionar elementos en CSS, indicando los tipos de posicionamiento que existen.

El posicionamiento permite que podamos colocar los elementos HMTL de una página web, todas la etiquetas, sea cual sea, esta dentro de una caja (aunque no la veamos), normalmente se usan las etiquetas <div> y <span> como contenedores.

Su diferencia es que <div> rompe el flujo (ocupa toda la linea) y <span> no rompe el flujo.

Los ejemplos que veremos, tienen una hoja de estilos reset, pincha aquí para verlo, y otra hoja de estilos normal.

NOTA: recuerda que puedes pinchar en las imágenes para verlas mejor.

Para posicionar un elemento HTML, podemos usar la etiqueta o llevar un atributo id, class o ambos. En la regla que creemos, debemos indicar si tiene algún tipo de posicionamiento y alguna cosa mas que ahora veremos:

Fixed: la caja va en cierta posición y no se mueve, si hacemos scroll (mover la web hacia abajo). Para indicarlo, en la regla que seleccione el elemento HTML a posicionar escribimos la propiedad position: fixed; después de esta propiedad, deberemos indicar en que lugar queremos que se posicione, para esto usamos las propiedades top, bottom, left y right. Es muy importante saber, que cuando posicionamos un elemento con fixed los demás elementos no lo toman en cuenta y puede pasar que se solapen. Veamos un simple ejemplo:

Si nos fijamos en la anterior imagen, vemos que la caja posicionada con fixed, se queda «clavado» donde le indicamos aunque hagamos scroll.

Aquí te dejamos el documento HTML y las hojas de estilos, para que lo veas tu mismo.

Absolute: la caja va en una posición inicial y puede desaparecer al hacer scroll. Para indicarlo, en la regla que seleccione el elemento HTML a posicionar escribimos la propiedad position: absolute; después de esta propiedad, deberemos indicar en que lugar queremos que se posicione, para esto usamos las propiedades top, bottom, left y right. Es como fixed, pero al hacer scroll desaparece. Veamos un ejemplo:

Aquí te dejamos el documento HTML y las hojas de estilos, para que lo veas tu mismo.

Relative: indica una posición para el desplazamiento relativo según donde le corresponda. Para indicarlo, en la regla que seleccione el elemento HTML a posicionar escribimos la propiedad position: relative; después de esta propiedad, deberemos indicar en que lugar queremos que se posicione, para esto usamos las propiedades top, bottom, left y right. Recuerda que el posicionamiento se basara según donde le corresponda originalmente, es decir, es relativo. Veamos un ejemplo:

Como veis en la imagen anterior, el 2º div se posiciona según la posición del anterior elemento, si el 1º elemento cambiara, como por ejemplo, añadirle un margen también afectaría al 2º div.

Aquí te dejamos el documento HTML y las hojas de estilos, para que lo veas tu mismo.

Static: da permiso al navegador para que se coloque la caja donde le corresponda, esto quiere decir que aunque le indiquemos una posición con las propiedades top, bottom, left y right no cambiara de posición, se quedara donde le corresponde, aunque si indicamos la propiedad margin si podremos modificar su posición. Para indicarlo, en la regla que seleccione el elemento HTML a posicionar escribimos la propiedad position:static; . Veamos un ejemplo:

Si nos fijamos, aunque pongamos una posición determinada con top y left, si el posicionamiento es estático lo omitirá, por lo que no es necesario colocarlo.

Aquí te dejamos el documento HTML y las hojas de estilos de los dos ejemplos, para que lo veas tu mismo.

Float: mueve una caja a cierta posición permitiendo que otras cajas floten a su alrededor. Para indicarlo, en la regla que seleccione el elemento HTML a posicionar escribimos la propiedad float: left; o float: right;. Esto hará que mueva el elemento a la derecha o izquierda y que el resto de elementos floten alrededor de él. Hay que tener en cuenta que si un texto o caja tiene hueco podrá ocupar ese espacio, para que no pase, en el elemento que queremos que no ocupe ese espacio debemos escribir la propiedad clear: both;. Vamos a ver un ejemplo:

Como vemos en la anterior imagen, el texto flota alrededor del texto. Si queremos que el texto no flote deberemos escribir la propiedad clear: both; . Vamos a ver como queda: