# Относительное позиционирование элементов в CSS

Относительное позиционирование задается с помощью значения `relative` для свойства `position`. Такое позиционирование позволяет сдвигать элементы относительно своего текущего положения на заданную величину. При этом все остальные элементы страницы будут думать, что элемент стоит там, где и стоял изначально. То есть при таком типе позиционирования элемент не выпадает из нормального потока.

Смещения от текущего положения задаются свойствами `top`, `right`, `bottom` и `left`.

## Пример

Для начала давайте просто сделаем два блока без позиционирования:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 100px; height: 100px; border: 1px solid green; } #elem2 { width: 200px; height: 200px; border: 1px solid red; }`

:

## Пример

Добавим теперь первому блоку `relative`. От этого пока ничего не поменяется, так как мы не указали смещение блока:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { position: relative; width: 100px; height: 100px; border: 1px solid green; } #elem2 { width: 200px; height: 200px; border: 1px solid red; }`

:

## Пример

Давайте теперь отодвинем наш блок на `30px` сверху, указав ему свойство `top`. При этом все остальные элементы будут вести себя так, будто наш блок остался том месте, где был изначально:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { position: relative; top: 30px; width: 100px; height: 100px; border: 1px solid green; } #elem2 { width: 200px; height: 200px; border: 1px solid red; }`

:

## Пример

Давайте также отодвинем наш блок на `40px` слева, указав ему свойство `left`:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { position: relative; top: 30px; left: 40px; width: 100px; height: 100px; border: 1px solid green; } #elem2 { width: 200px; height: 200px; border: 1px solid red; }`

:

## Пример

Отрицательные значения свойств `top`, `right`, `bottom` и `left` сдвигают в противоположном направлении. К примеру, положительное значение `top` сдвигает вниз, а отрицательное - вверх.

Давайте отодвинем наш второй блок на `40px` вверх, указав ему отрицательное значение свойства `top`:

`<div id="elem1"></div> <div id="elem2"></div>` `#elem1 { width: 100px; height: 100px; border: 1px solid green; } #elem2 { position: relative; top: -40px; left: 20px; width: 200px; height: 200px; border: 1px solid red; }`

:

## Практические задачи

Даны следующие блоки:

`<div id="elem1"></div> <div id="elem2"></div> <div id="elem3"></div> text text text` `#elem1 { width: 100px; height: 100px; margin-bottom: 20px; background-color: #FF8888; } #elem2 { width: 100px; height: 100px; margin-bottom: 20px; background-color: #7E89EB; } #elem3 { width: 100px; height: 100px; margin-bottom: 20px; background-color: #4DEE99; }`

:

Сместите эти блоки с помощью относительного позиционирования следующим образом:

← →
↑