Explicación del atributo position de CSS

Anuncio:

Vamos a explicar el funcionamiento del atributo position de CSS, y veremos algunos ejemplos de su aplicación en cajas o divs.

Accede a los ejemplos para ver el comportamiento de los divs en función del valor del atributo position.

El atributo position define cómo se posiciona un objeto respecto al flujo normal de los elementos, tenemos 5 posibles valores que son:

• static
• fixed
• relative
• absolute
• inherit

¿En qué consiste cada uno? Veámoslo, recomiendo tener abierta en otra pestaña la página de los ejemplos.

Static

Por defecto, todos los elementos tienen el atributo static, son estáticos, no se incluye en el ejemplo debido a su simplicidad.

relative

El valor ‘relative’ de position permite usar 4 atributos más, que son top, bottom, left y right, los cuales permiten ‘mover’ nuestro div o caja según queramos, el código del div azul del ejemplo sería el siguiente:

#relativo{
	position: relative;
	top: 50px;
	left: 50px;
	width: 200px;
	background: blue;
}

Con los valores de top y left, desplazamos la caja 50px desde arriba y desde la izquierda.

absolute

Quizás este sea el valor más interesante por las posibilidades que nos genera, cuando un elemento tiene el atributo position con valor absolute, «se sale» del flujo normal de los elementos, es decir, si declaramos varios divs estáticos, se van situando uno debajo del otro, sin embargo, si uno tiene posición absoluta se «superpone» a los demás.

Su posición se corresponderá con la coordenada 0,0 del primer elemento con position:relative que encuentre, ¿cómo es esto? Si tenemos un div A con posición relativa y un hijo de A, que será B, con posición absoluta, B se situará en la esquina superior izquierda de A, «superpuesto» a él. En el caso de que el padre de B no tuviera posición relativa, se posicionaría respecto del padre más cercano con posición relativa, y si no, respecto del body, que es un elemento con esta característica.

Veamos el código del ejemplo correspondiente a los divs relativo y absoluto:

#Absolutos{
	position: relative;
}

#Absolutos .A{
	padding: 5px 10px 25px 10px;
}

#Absolutos .B{
	position: absolute;
	top: 150px;
	left: 100px;
	padding: 5px 10px 35px 10px;
}

En el cual, #Absolutos sería el contenedor de A y B, A tendría posición estática y B absoluta, al tener el contenedor posición relativa, B se posiciona en la esquina superior izquierda del contenedor, pero modificamos la posición con top y left.

Como se puede apreciar en el ejemplo, el div azul se superpone con el rojo, consiguiendo asi infinidad de nuevas posibilidades para nuestros diseños.

fixed

Un elemento con valor ‘fixed’ tiene posición fija dentro de la estructura de nuestra web, lo que quiere decir, que aunque hagamos scroll, el elemento permanecerá siempre en el mismo punto de nuestra pantalla, en el ejemplo, los estilos del div fijo rojo son:

#fijo{
	position: fixed;
	bottom: 0;
	width: 100%;
	background: red;
}

Si te das cuenta, al hacer scroll en la página de ejemplo, el div fijo permanece inmutable.

inherit

Para finalizar, el valor inherit para position especifica que se va a heredar el comportamiento de los elementos padres, por ejemplo, si tenemos un div A con position relative, y un hijo de A, B, con valor inherit, B heredará el comportamiento de A.

Accede a los ejemplos aquí

Espero que haya sido de ayuda.

HackSaludos!

• CSS3