CSS: Posicionamiento relativo

Este tipo de posicionamiento difiere mucho del anterior (estático o normal).

El posicionamiento relativo permite desplazar una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.

El desplazamiento de una caja no afectará al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original. La imagen siguiente aclara el concepto:

La caja 2 se ha desplazado hacia la derecha y hacia abajo. Como el resto de cajas de la página no modifican su posición, se producen solapamientos entre los contenidos de las cajas.

El único problema de posicionar elementos de forma relativa es que se pueden producir solapamientos con otros elementos de la página.

La propiedad left desplaza la caja hacia su derecha, la propiedad right la desplaza hacia su izquierda, la posición top desplaza la caja de forma descendente y la propiedad bottom desplaza la caja de forma ascendente. Si se utilizan valores negativos en estas propiedades, su efecto es justamente el inverso.

Sirva el siguiente ejemplo, donde inicialmente las cajas están posicionadas de forma estática o normal:

Ahora se le aplicará un posicionamiento relativo para desplazar la primera imagen hacia abajo:

img.desplazada { position: relative; top: 8em; }
<img class="desplazada" src="imagenes/imagen.png" alt="Imagen genérica" />
<img src="imagenes/imagen.png" alt="Imagen genérica" />
<img src="imagenes/imagen.png" alt="Imagen genérica" />

El resultado visual sería el siguiente:

PRÁCTICA: Dado el siguiente código HTML, aplicar estilos para obtener el resultado que se muestra en la imagen:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="caja1">
<p>Esta es la primer caja.</p>
<p>No se desplaza.</p>
</div>
<div id="caja2">
<p>Esta es la segunda caja.</p>
<p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición por defecto.</p>
</div>
<div id="caja3">
<p>Esta es la tercer caja.</p>
<p>No se desplaza.</p>
</div>
</body>
</html>


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO