Posición Absoluta y Relativa

En CSS, el posicionamiento (position) de elementos puede resultar en ocasiones realmente confuso, aunque realmente es muy fácil de entender.

Un elemento puede tener los siguientes valores de posicionamiento:
position : static,  relative, absolute, fixed

Todos los elementos de la web tienen por defecto un valor estático (static). O sea, si la posición del elemento no es definida,  será estática y se mostrará dentro del flujo normal de la página.  En este caso, si se le intenta aplicar reglas como top, bottom, left o right, las ignorará completamente.

Posición Absoluta (position: absolute)

Esta es la propiedad más fácil de aprender y entender. Cuando a un elemento se le aplica position: absolute , se le está indicando que sale del flujo normal del documento y su posición será definida con top, left, bottom, right del 

Ver ejemplo del siguiente código HTML:

< div >
  < div >Este es un bloque de texto normal < /div >
  < div > Este es un bloque de texto normal < /div >
  < div > Este es un bloque de texto normal < /div >
  < div > Este es un bloque de texto con posición absoluta < /div >
< /div >

Código CSS:

.container{margin:120px;}
.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}
.demo-position{position:absolute;top:0;left:0;background:#eee;}

Posición Relativa (position: relative)

La posición relativa de un elemento, utiliza las mismas cuatro propiedades que la posición absoluta, pero a diferencia, esta no se sale del flujo normal del documento.
Lo más importante es darse cuenta de que si un elemento con posición relativa contiene otro con posición absoluta,  este último tomará como referencia el elemento relativo para determinar la posición.

Haremos un cambio en el código CSS anterior.

.container{margin:120px;position:relative}
.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}
.demo-position{position:absolute;top:0;left:0;background:#eee;}