Entendiendo los posicionamientos en CSS

Con CSS es posible posicionar cualquier elemento en cualquier lugar de la pantalla de forma precisa; en CSS existen distintos tipos de posicionamientos:

• static
• absolute
• relative
• fixed

Propiedades de los posicionamientos

A excepción del posicionamiento static es posible emplear las siguientes propiedades para posicionar el elemento en cualquier lugar de la pantalla; puede establecerse como valor cualquier tipo de medidas o porcentajes como podrás ver en el código fuente de los ejemplos:

top	Se emplea la propiedad top para indicar un desplazamiento del borde superior del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados.
left	La propiedad left indica un desplazamiento del borde izquierdo del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados.
right	La propiedad right indica un desplazamiento del borde derecho del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados.
bottom	Por último y como podrás deducir, la propiedad bottom indica un desplazamiento del borde inferior del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados.

Lo que diferencia a cada unos de los posicionamientos vistos anteriormente (static, absolute, relative y fixed) no es la forma de posicionarnos, si no el comportamiento que los hace único en comparación con cualquier otro; en esta entrada explicaremos cada uno de ellos y daremos algunos ejemplos prácticos de los mismo.

El posicionamiento static

El más simple de todos los posicionamientos y el utilizado por todos los navegadores como valor por defecto en todos los elementos; en otras palabras el posicionamiento static no provoca ningún posicionamiento especial en los elementos y por lo tanto las propiedades top, left, right y bottom no se tendrán en cuenta:

El posicionamiento absolute

Con este posicionamiento es posible colocar elementos como div de manera absoluta en el documento HTML a través de las propiedades top, left, right y bottom; lo que significa que el elemento queda aparte del flujo normal del documento HTML y no importa en donde aparezca el código HTML el elemento quedará posicionado en el mismo lugar:

El bloque de color rojo contiene al contenedor de color azul el cual se desplaza de izquierda a derecha y de arriba a abajo pero dentro del documento independientemente de si esta dentro de un contenedor.

El posicionamiento relative

Al contrario del posicionamiento anterior el lugar en donde aparezca el código HTML del elemento definirá su posición; en otras palabra su desplazamiento depende del bloque que lo contenga, al igual que en el caso anterior se pueden emplear las propiedades top, left, right y bottom para definir su desplazamiento como podrás darte cuenta en los siguientes ejemplos:

El bloque de color rojo contiene al contenedor de color azul el cual se desplaza de izquierda a derecha y de arriba a abajo pero dentro de su contenedor padre de color rojo.

El posicionamiento fixed

Por último el posicionamiento de tipo fixed tiene los mismas cualidades que el posicionamiento de tipo absolute, pero la posición de éste siempre estará fija (se ancla) sin importar si hay barras de desplazamientos este no variará su ubicación de la pantalla; es muy útil cuando queremos crear un menú que siempre esté ubicado en la cabecera del documento:

Sintaxis básica de para el posicionamiento absolute

.elemento{
	position:absolute;
	top:50px;
	left:200px;
}