1. POSITION:STATIC

El posicionamiento por defecto para todos los elementos es STATIC, que hace que el elemento no se reposicione y ocupe su posición normal en el documentos, según el flujo del código.

Habitualmente no se debería especificar, a menos que necesites reponer la posición normal tras haber reubicado con otra propiedad.

#div-1 {
position:static;
}

2. POSITION:RELATIVE

Si especificas POSITION:RELATIVE, entonces podrás usar TOP ó BOTTOM y LEFT ó RIGHT, para mover el elemento con respecto a la posición que debería ocupar normalmente en el documento.

Movamos el div-1 20 pixels abajo y 40 pixels a la izquierda:

#div-1 {
position:relative;
top:20px;
left:-40px;
}

Date cuenta de que el espacio donde div-1 debería estar si no se hubiera movido, continúa en su sitio y ahora es un espacio vacío. El siguiente elemento (div-after) tampoco se mueve cuando desplazamos div-1. Eso es porque div-1 todavía ocupa ese espacio original en el documento, incluso después de haberlo movido.

Puede parecer que POSITION:RELATIVE no es muy útil, pero servirá para una tarea importante que veremos más adelante.

3. POSITION:ABSOLUTE

Cuando especificas POSITION:ABSOLUTE, el elemento se "borra" del documento y se coloca exactamente dónde tu indicaste.

Movamos div-1a a la esquina superior derecha (busca arriba la capa roja):

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

En esta ocasión, cuando "borramos" div-1a, los otros elementos se reposicionan ocupando el hueco que se ha dejado: div-1b, div-1c, y div-after se mueven arriba porque div-1a ya no está allí.

Cómo pretendíamos, div-1a se ha ubicado en la esquina superior derecha. Esto es útil para colocar cualquier elemento directamente dónde queramos, pero hay que tener en cuenta que si no existen otros posicionamientos previos, el navegador lo colocará con respecto a la página.

Para colocar div-1a en una posición relativa a su contenedor (div-1) es para lo que necesitaremos la posición relativa.

Notas:

• Hay un problema en IE: si especificas una anchura porcentual (como "width:50%"), entonces el ancho se basará en el elemento primario (padre), en lugar de en el elemento de posicionamiento.

4. POSITION:RELATIVE + POSITION:ABSOLUTE

Si fijamos posicionamiento relativo para div-1, cualquier elemento dentro de div-1 será posicionado relativamente a div-1. De esta manera, si fijamos una posición absoluta para div-1a, ahora lo podremos colocar arriba-derecha de div-1 y no de la página:

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. Dos columnas con ABSOLUTE

Ahora hemos construido un esquema de dos columnas, usando posicionamiento relativo y absoluto.

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Una ventaja de usar este tipo de posicionamiento, es que podemos colocar elementos en cualquier orden, en cualquier parte de la página, sin importar el orden en que aparecen en el código HTML. Así es cómo hemos puesto div-1b delante de div-1a.

Pero espera, ¿qué ocurre con los otros elementos? Han sido ocultados por los elementos con posición absoluta. ¿Qué podemos hacer para solucionarlo?

6. Dos columnas con ABSOLUTE + HEIGHT

Una solución es incorporar una altura fija a los elementos.

Sin embargo, esta no es una solución viable para la mayoría de diseños, porque normalmente no sabemos a priori cuanto texto va a contener la capa o el tamaño exacto de fuente que usaremos.

#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

7. FLOAT

Para columnas de alto variable, el posicionamiento absoluto no funciona bien, así que veamos otra solución.

Podemos hacer "flotar" un elemento para colocarlo tan lejos como sea posible a la derecha o a la izquierda y así hacer también que el texto lo rodee. Este sistema se usa habitualmente con imágenes, pero también se puede utilizar con otros elementos más complejos... sobre todo porque es la única herramienta que tenemos para ello!

#div-1a {
float:left;
width:200px;
}

8. Columnas con FLOAT

Si hacemos flotar una columna a la izquierda y luego una segunda columna también a la izquierda, ambas se mostrarán juntas.

#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

9. Columnas con FLOAT + CLEAR

Después de ubicar elementos con FLOAT, podemos utilizar CLEAR para eliminar en los siguientes elementos ese efecto, de manera que se muestren como si no se hubiera indicado nada (STATIC)

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

10. Disclaimer & Recursos

Estos ejemplos son muy sencillos y no provocan la ira de los bugs CSS de IE (muchos).

La siguiente página fue muy valiosa:

Relatively Absolute

Cuando pases por aquí aprovecha para ver también:

• BarelyFitz Designs Open-Source Software Projects
• BarelyFitz Designs Screencasts