Код вашей страницы

<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>position:relative позиционирует элемент относительно его нормального положения..</p>
</body>

</html>

Результат в окне браузера

Этот заголовок без позиционирования.

Этот заголовок сдвинут влево, относительно своего нормального положения.

Этот заголовок сдвинут вправо относительно своего нормального положения.

position:relative позиционирует элемент относительно его нормального положения..

К примерам CSS >> В раздел CSS >> На главную >>


HTML-верстка: инструменты и приемы профессиональной front-end разработки