El posicionamiento explicado en 9 pasos

1.- position: static

El posicionamiento por defecto para todos los elementos es position: static, lo que significa que el elemento no estará posicionado y aparecerá donde normalmente debería hacerlo. Normalmente no deberá especificarse a no ser que deba modificarse una posición previamente definida.

#div-1 {
position:static;
}

2.- position: relative

En caso de especificarse position: relative, podrán utilizarse los valores top o bottom, right o left para posicionar el elemento en la posición relativa donde inicialmente debería aparecer. En el siguiente ejemplo el div se posicionará 20 pixeles hacia abajo y 40px a la derecha de su posición original.

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

El espacio que deje libre el div no quedará ocupado por ningún otro elemento.

3.- position: absolute

Cuando se especifica position:absolute, el elemento será desplazado colocado en función del primer elemento padre posicionado en que se encuentre (normalmente será el body).

La diferencia del posicionamiento relativo, los demás elementos ocuparán su posición.

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

Existen bug en IExplore con este tipo de posicionamiento. En el ejemplo anterior, si se le especificara un ancho del 50% (width:50%), el ancho se aplicaría al elemento padre en lugar del elemento en si.

4.- position: relative + position: absolute

En caso de definir position: relative en el padre, todos los elementos incluidos en él se posicionarán relativamente tomándolo como referencia (es decir, actuará como origen de coordenadas para sus divs hijos). Como se comenta, si posteriormente a uno de sus hijos se le indica la propiedad position: absolute, se posicionará en la esquina superior izquierda de su elemento contenedor.

5.- Layout de 2 columnas

Podrá definirse un layout de 2 columnas combinando el posicionamiento absoluto y relativo:

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
<!-- CÓDIGO HTML -->
<div id="div-1"> <div id="div-1a>Columna derecha</div>
<div id="div-1b>Columna izquierda</div>
</div>

Una ventaja de usar el posicionamiento absoluto es que pueden ir definiéndose los elementos en cualquier orden. Primero podría definirse la columna izquierda y luego la derecha o al revés.

Los demás elementos, sin embargo, podrán verse afectados por el posicionamiento absoluto definido. ¿Cuál será la solución?

6.- 2 columnas con altura absoluta

Una posible solución es fijar una altura absoluta. Sin embargo, no será una solución viable para la mayoría de diseños, pues normalmente no se conoce ni el tamaño de la fuente ni la cantidad de texto que va a contener cada una de ellas y podría cortarse su contenido.

#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

Por lo tanto, el posicionamiento absoluto para definir alturas variables no es óptimo.

La solución consiste en posiconar un elemento de forma flotante con tal de ubicarlo lo más a la derecha o lo más a la izquierda posible para, posteriormente, incluir texto en él.

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

8.- FLOAT DE COLUMNAS

Si se hace flotar una columna a la izquierda, también flotará por defecto la segunda a la izquierda superponiéndose sobre cualquier otro elemento.

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

9.- FLOAT DE COLUMNAS + clear

Por lo tanto, después de hacer flotar las columnas deberá "limpiarse" el contenido que ocupan para que los demás elementos se posicionen debajo de ellos.

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


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO