Posicionamiento Relativo

El posicionamiento relativo mueve la caja según su posición original respecto a los parámetros que nosotros le indiquemos, podemos mover la caja tanto para la derecha, izquierda, arriba y abajo.

Las propiedades que desplazan las cajas son top, right, bottom y left. Al ocupar un:

position: relative;
top: 200px;

El top está moviendo la caja 200px desde la posición de arriba hacia abajo. Por lo tanto a simple vista esto desplaza la caja en dirección contraria.

Elementos posicionados de forma normal

Aplicando la posición relativa a la caja obtenemos:

Elemento posicionado de forma relativa

Por tanto, la propiedad top se emplea para mover las cajas de forma descendente, la propiedad bottom mueve las cajas de forma ascendente, la propiedad left se utiliza para desplazar las cajas hacia la derecha y la propiedad right mueve las cajas hacia la izquierda. Este comportamiento parece poco intuitivo y es causa de errores cuando se empiezan a diseñar páginas con CSS. Si se utilizan valores negativos en las propiedades top, right, bottom y left, su efecto es justamente el inverso.

Html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Posicionamiento Relativo</title>
	<link rel="stylesheet" href="relativo.css">
</head>
<body>
	<div class="verde"><h1>Verde</h1></div>
	<div class="rojo"><h1>Rojo</h1></div>
	<div class="azul"><h1>Azul</h1></div>
</body>
</html>

Css

.verde{
	width: 200px;
	height: 100px;
	background-color: green;
	color:#fff;
	text-align: center;
	position: relative;
	top: 100px;
	right: -100px;
	z-index: 1; 
}
.rojo{
	width: 200px;
	height: 100px;
	background-color: red;
	color:#fff;
	text-align: center;
	position: relative;
	z-index: 10;
}
.azul{
	width: 200px;
	height: 100px;
	background-color: blue;
	color:#fff;
	text-align: center;
}