DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
12-03-2015

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

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;
}

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Ondas con SVG y CSS

Ondas con SVG y CSS

Loader variados con CSS

Loader variados con CSS

Flat Module con puro CSS

Flat Module con puro CSS

Algunos artículos que te pueden interesar

¿Cómo hacer una simple galería responsive con CSS 1?

¿Cómo hacer una simple galería responsive con CSS 1?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 10-11-2014

Cómo crear un menú de opciones tipo rueda con CSS y HTML

Cómo crear un menú de opciones tipo rueda con CSS y HTML

Veremos algunos botones cuyo menú será desplegado al pulsar (evento clic) o posicionarnos encima de los mismos (evento hover) sobre el mismo en forma de una rueda; los mismos fueron inspirados del Material Design.

Andrés Cruz 01-08-2017

¿Qué es LESS CSS?

¿Qué es LESS CSS?

LESS CSS es una extensión de CSS que nos permite agregar dinamismo al CSS tradicional.

Andrés Cruz 12-09-2013