Редактор Онлайн

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>

<body>
<h2>Это заголовок без позиционирования</h2>
<h2 class="pos_left">Этот заголовок сдвинут влево по отношению к его обычной позиции</h2>
<h2 class="pos_right">Этот заголовок сдвинут вправо по отношению к его обычной позиции</h2>
<p>Относительное позиционирование сдвигает элемент ОТНОСИТЕЛЬНО его изначальной позиции.</p>
<p>Стиль "left:-20px" вычитает 20 пикселей из начальной позиции элемента слева.</p>
<p>Стиль "left:20px" прибавляет 20 пикселей к начальной позиции элемента слева.</p>
</body>

</html>

Ваш Результат:

Отредактируйте код сверху и кликните кнопку, чтобы посмотреть результат.

Уроки CSS - Попробуйте сами