Абсолютное позиционирование относительно каких-либо элементов на веб-странице.

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

Но, такое положение дел можно изменить.

Предположим, что мы имеем следующий код:

<div style="background:#ccc;">Блок 1
   <div style="background:#c9c; width:500px; margin:auto;">Блок 2
       <div style="background:#9cc; position:absolute; left:0; top:0; width:300px;">Блок для абсолютного позиционирования</div>
   </div>
</div>

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

А что делать, если мы хотим абсолютно позиционировать элемент относительно элемента div с содержимым "Блок 2"?

Решение здесь довольно простое. Для блока, относительно которого нужно спозиционировать элемент с абсолютным позиционированием, нужно добавить свойство position:relative.

Мы уже знаем, что добавление position:relative, без добавления к нему свойств left, right, top или bottom не изменяет первоначального положения блока.

Давайте это сейчас и сделаем.

<div style="background:#ccc;">Блок 1
   <div style="background:#c9c; width:500px; margin:auto; position:relative;">Блок 2
       <div style="background:#9cc; position:absolute; left:0; top:0; width:300px;">Блок для абсолютного позиционирования</div>
   </div>
</div>

Все. Проблема решена. Теперь элемент с position:absolte располагается не относительно окна браузера, а относительно элемента div с содержимым "Блок 2".

Какие выводы можно сделать?

Абсолютное позиционирование элемента будет происходить либо относительно окна браузера, либо относительно первого попавшегося родительского элемента со свойством position:relative;

Таким образом можно решать множество проблем верстки и позиционировать элементы в нужном месте без проблем.

И еще один момент. При попытке задать ширину абсолютно позиционируемого блока в %, проценты будут браться от ширины первого блока, который имеет свойство position:relative;

<div style="background:#ccc;">Блок 1
 <div style="background:#c9c; width:500px; margin:auto; position:relative;">Блок 2
 <div style="background:#9cc; position:absolute; left:0; top:0; width:50%">Блок для абсолютного позиционирования</div>
 </div>
</div>