1

1. position:static

El valor predeterminado para todos los elementos es position:static, que posiciona al elemento según el lugar donde fue definido en el HTML.

Por lo general no hay necesidad de definir position:static, a menos que querramos caerle encima a alguna regla anterior que haya modificado el posicionamiento.

#div-1 {
  position:static;
}
      

2

2. position:relative

Si le definimos position:relative a un elemento, entonces podemos utilizar top, bottom, left y right para mover el elemento con relación a la posición en la que aparecería normalmente en el documento.

Movamos el div-1 20 pixeles hacia abajo y 40 pixeles hacia la izquierda:

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

Fíjate que en el lugar donde hubiese aparecido el div-1 ahora hay un espacio en blanco. El elemento siguiente (div-2) no cambió de posición porque ese espacio en blanco le sigue perteneciendo al div-1, aunque lo hayamos movido.

Parecería que position:relative no es muy útil, pero tendrá una tarea muy importante más adelante.

3

3. position:absolute

Cuando utilizamos position:absolute, el elemento es removido del documento y colocado exactamente donde nosotros queremos.

Movamos el div-1a a la esquina superior derecha de la página:

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

Fíjate que esta vez, como el div-1a fue removido del documento, los otros elementos se posicionaron de manera distinta: div-1b, div-1c y div-2 se movieron hacia arriba para ocupar el espacio que antes era de div-1a.

También fíjate que el div-1a fue colocado en la esquina superior derecha de la página. Es divertido poder colocar elementos directamente en la página, pero usualmente no es de gran utilidad.

Lo que realmente queremos hacer es colocar el div-1a en la esquina superior del div-1. Aquí es donde position:relative vuelve a tener importancia.

4

4. position:relative + position:absolute

Si le definimos position:relative al div-1, cualquier elemento que le coloquemos dentro se posicionará con relación a div-1.

Si luego le definimos position:absolute al div-1a, podemos colocarlo en la esquina superior derecha del div-1:

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

5

5. dos columnas absolutas

¡Ahora podemos crear un layout de dos columnas utilizando 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 utilizar posicionamiento absoluto es que podemos colocar los elementos en cualquier posición en la página, sin importar el orden en el que aparezcan en el HTML. Por ejemplo, decidimos posicionar div-1b antes que div-1a.

Un momento, ¿qué sucedió con los demás elementos? Están siendo ocultados por los elementos de posición absoluta. ¿Qué podemos hacer al respecto?

6

6. dos columnas altura absoluta

Una opción sería definir una altura fija para los elementos.

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

Sin embargo, esta no es una solución viable para la mayoría de los diseños, ya que por lo general no sabemos de antemano cuánto texto tendrá cada elemento, ni cuál será el tamaño de fuente a utilizar.

7

7. float

Para columnas de altura variable, el posicionamiento absoluto no funciona, asi que debemos buscar otra alternativa.

Podemos "flotar" un elemento para empujarlo lo más que se pueda hacia la derecha o izquierda, permitiendo así que el texto rodee al elemento. Esta técnica se utiliza normalmente con imágenes, pero también se puede utilizar para crear layouts complejos.

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

8

8. columnas flotantes

Si flotamos una columna hacia la izquierda y la otra hacia la derecha, entonces quedarán una alado de la otra.

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

9

9. columnas flotantes con clear

Después de los elementos flotantes podemos añadir un "clear" para empujar el resto del contenido hacia abajo.

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

10

10. Aclaraciones

Estos son ejemplos muy sencillos, que no deben generar errores o bugs en Internet Explorer (que tiene muchos bugs).

Esta es una traducción a español del artículo:
Learn CSS Positioning in Ten Steps

Ya que estás aquí, tal vez te interese consultar:

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