Aprendiendo a diseñar con DIV y CSS Parte 2: Position absolute y relative

La otra forma de diseñar mediante etiquetas DIV despues de las populares float y clear que vimos en el anterior artículo es mediante la propiedad CSS position, que básicamente "posiciona" un contenedor o elemento de bloque en cualquier lugar de la página, lo único que se requiere es un referente a partir del cual se posicionará.

Todos los referentes son aquellos elementos que tiene la propiedad position:relative asignada. Además se usa la propiedad z-index:valor, para que dichas capas que literalmente se enciman sobre otras tengan un orden según el número asignado, como capas en programas como Photoshop entre más alto el valor más arriba estará la capa de otros elementos.

Se llama z-index porque figurativamente corresponde al eje axial espacial Z (largo/grosor), mientras que el eje X es igual al ancho e Y al alto.

Además debemos usar las propiedades left:valor, right:valor, top:valor y bottom:valor para, a partir de que punto, ya sea arriba-derecha, arriba-izquierda, abajo izquierda y abajo-derecha, deberán posicionarse.

Reglas del diseño por position y z-index

• Los elementos deberán tener obligatoriamente un referente DIV esto evita que se muevan o se oculten si la resolución de pantalla es inferior al elemento posicionado, además, podemos usar cada una de las equinas de dicho DIV como referentes de distancia. El contenedor tiene la propiedad position:relative;
• Los elementos posicionados deben tener la propiedad position:absolute;
• Los elementos que se posicionen deberían tener asignado la propiedad CSS z-index que evite obligue a que se superpongan sin estorbarse.
• Los elementos posicionados se controlan con las propiedades CSS; left/top, left/bottom, right/top o right/bottom.
• Si no pone un valor position:relative, el navegador usará la resolución actual de pantalla, si el sitio web es más grande que la resolución de la pantalla y los elementos posicionados exceden el tamaño de la resolución, quedarán ocultos salvo que se escale la página web, las barras de desplazamiento no servirán para mostrarlos

Por ejemplo, en este código un div rojo (contenedor) contiene a otro negro (objetoposicionado) y al usar position absolute, este flota sobre el contenedor y usa las esquinas izquierda (left) / superior (top) para controlar su separación, pero podemos usar left/bottom, right/top o right/bottom, algo bastante útil en contenedores de tamaño variable.

<div class="contenedor" style="position:relative">
<div class="objetoposicionado" style="position:absolute;left:-40px; top:-50px;z-index:2;">
</div>
</div>

left, right, top y bottom
En los valores left, top, bottom y right podemos usar números negativos para sacar del contenedor el elemento con position:absolute. Los elementos de clase contenedor y objetoposicionado que son del CSS que no se ve, agregan parámetros como alto, ancho y color de fondo que aquí no ponemos para que no estorben en la comprensión del ejercicio.

Si agregamos un segundo div, con la clase objetoposicionado2, este estará alineado a la derecha (right) y arriba (top):

<div id="contenedor" style="position:relative">
<div class="objetoposicionado" style="position:absolute;left:-40px; top:-50px;z-index:2;">
</div>
<div class="objetoposicionado2" style="position:absolute;right:-40px; top:-50px;z-index:3;">
</div>
</div>

z-index
Si notaron bien, en el código del cuadro negro tiene asignado en z-index el valor 2, mientras que en el cuadro azul es 3, el que tiene el valor más alto se superpone al z-index más bajo.

Cuatro div alineados a cada esquina
Como se ve en el ejemplo de abajo, cada esquina del div contenedor se usa como referencia para alinear a los div posicionados con absolute, que a su vez usan sus propias esquinas para alinearse, esto significa si ponemos el valor de right (derecha) y bottom (abajo) a 0 el cuadro posicionado se alineara su esquina inferior-derecha con la esquina inferior-derecha del contenedor:

<div id="contenedor" style="position:relative">
<div class="objetoposicionado" style="position:absolute;left:-40px; top:-40px;z-index:2;">
</div>
<div class="objetoposicionado2" style="position:absolute;right:-40px; top:-40px;z-index:3;">
</div>
<div class="objetoposicionado3" style="position:absolute;left:-40px; bottom:-40px;z-index:4;">
</div>
<div class="objetoposicionado4" style="position:absolute;right:-40px; bottom:-40px;z-index:5;">
</div>
</div>

Es necesario indicar que podemos posicionar elementos sin necesidad de z-index, solamente es necesario si existen elementos que en algún momento podrían superponerse.

Viene de:

1. Aprendiendo a diseñar con DIV y CSS Parte 1: Float y Clear