Просмотров: 1 547

Относительное позиционирование элементов на веб-странице. Свойство CSS position relative.

Первый способ позиционирования элементов на веб-странице, который мы с вами сейчас рассмотрим — это относительное позиционирование элементов.

Этот вид позиционирования не то, чтобы изменяет нормальный поток элемента на веб-странице, он позволяет менять позицию элемента относительного нормального потока.

Давайте вернемся все к тому же примеру из предыдущих уроков, когда три блока div располагаются один над другим и среднему из них добавим свойство position:relative.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:relative;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

Как можно видеть из примера, пока, ровным счетом, ничего не изменилось.

Но, давайте попробуем элементу с position:relative добавить свойства left и top.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:relative; left:20px; top:15px;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

Блок, который находится посередине, смещается от левого края на 20 пикселей и сверху на 15 пикселей от текущего положения.

Таким образом, свойство position:relative отвечает за смещение элемента относительного того места, которое бы этот элемент занимал, будучи в нормальном потоке.

Все довольно просто. Потренируйтесь с этим на своих примерах, попробуйте задавать position relative для верхнего и нижнего блока, а также попробовать применять свойства bottom и right.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».