Posicionamiento CSS

Posicionamiento relativo

Es un posicionamiento calculado a partir de otro elemento. la caracteristica de este tipo de posicionamiento es que el elemento sigue ocupando el espacio después de haberse sido posicionado.

Posicionando de forma relativa

Tenemos tres bloques y antes de posicionarlos tenemos:

<div class="cuadro1">bloque1 ...</div>
<div class="cuadro2">bloque2 ...</div>
<div class="cuadro2">bloque3 ...</div>

.cuadro1 {height:250px;width:290px;
          background-color:#FF8000;
          color:#ffffff;}
.cuadro2 {height:250px;width:290px;
          background-color:#0000FF;
          color:#ffffff;}
.cuadro3 {height:250px;width:290px;
          background-color:#008000;
          color:#ffffff;}

Agregando la propiedad position con valor relative

posicionaremos de forma relativa el primer bloque, y lo desplazamos hacia la derecha y hacia abajo, notar que el lugar antes ocupado permanece como si elemento no hubiese sido movido.

<div class="cuadro1">bloque1 ...</div>
<div class="cuadro2">bloque2 ...</div>
<div class="cuadro2">bloque3 ...</div>

.cuadro1 {height:250px;width:290px;
          position:relative;top:90px;left:80px;
          background-color:#FF8000;
          color:#ffffff;}
.cuadro2 {height:250px;width:290px;
          background-color:#0000FF;
          color:#ffffff;}
.cuadro3 {height:250px;width:290px;
          background-color:#008000;
          color:#ffffff;}