Относительное позиционирование

3. Относительное позиционирование

На этой странице:

Относительное позиционирование задаётся указанием position: relative.

Как это работает

Если для такого элемента не заданы смещения (при помощи указаний left, right, top, bottom), он ведёт себя как статический: остаётся в потоке и форматируется так, будто позиционирование для него не задано вовсе.

Именно в таком качестве относительное позиционирование применяется чаще всего (без указания смещений). Рассматривая абсолютное позиционирование, мы уже видели, зачем это нужно: таким образом указывается блок-предок, относительно которого отсчитываются смещения для абсолютно позиционированного элемента.

Если для предков позиционирование не задано (static не в счёт), смещения будут откладываться от HTML.

Пусть для элемента block2 задано абсолютное позиционирование:

#block2 
{ 
  position: absolute; 
  left: …; top: …;
}

BODY становится началом отсчёта, оставаясь в потоке.

Предположим, нужно откладывать смещения от BODY. Тогда можно записать:

BODY    { position: relative; }
#block2 
{ 
  position: absolute; 
  left: …; top: …;
}

Элемент block1 становится началом отсчёта, оставаясь в потоке.

Если за начало отсчёта смещений нужно взять block1, задаём позиционирование для него:

.block1 { position: relative; }
#block2 
{ 
  position: absolute; 
  left: …; top: …;
}

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

В качестве примера запишем такой HTML-код:

<BODY>
  <H1>Занимательная история</H1>
  <P>Первый абзац.
  <P class=pos>Второй абзац.
  <P>Третий абзац.
</BODY>

Ничего особенного. Все элементы выводятся на экран потоком.

Чтобы блоки абзацев были лучше видны, зададим для них фон (отдельный для второго абзаца) и рамку:

P
{
  border: 1px solid black;
  background: #a7fbc0;;
}
P.pos { background: #fff2a6; }

Второй абзац сместился по отношению к своему прежнему положению в потоке. Остальные элементы этого «не заметили» — третий абзац не подтянулся на место второго.

Видим, что второй абзац «приподнялся» над потоком и стал перекрывать его.

А теперь зададим для второго абзаца относительное позиционирование и смещения:

P
{
  border: 1px solid black;
  background: #a7fbc0;;
}
P.pos 
{ 
  position: relative;
  left: 200px; top: 60px;
  background: #fff2a6; 
}

Получается, что относительно позиционированный элемент ведёт себя как двуликий Янус! С одной стороны, он остаётся в потоке (даже если смещается), а с другой — располагается над ним.

При изменении размеров окна или шрифта элемент с position: relative ведёт себя так, будто находится в потоке. Он переформатируется вместе с потоком, а затем смещается.

Продемонстрируем это поведение на следующем примере:

<BODY>
  <H1>Строчный элемент</H1>
  <P>
В этом абзаце задан <STRONG>относительно позиционированный строчный 
элемент</STRONG> STRONG.
</BODY>

Вот так этот код отображается на экране, когда не задано позиционирование:

P
{
  border: 1px solid black;
  background:#a7fbc0;;
}

Элемент STRONG «зарезервировал» своё место в потоке, а сам сместился вниз на 80 пикселов.

А теперь зададим относительное позиционирование для элемента STRONG:

P
{
  border: 1px solid black;
  background:#a7fbc0;;
}
P STRONG
{
  position:relative;
  top:80px;
  background:#fff2a6;
}

Уменьшим ширину окна. Абзац и STRONG переформатировались под новую ширину так, будто STRONG по-прежнему находится в абзаце.

Противоположные смещения

Что произойдёт, если относительно позиционированному элементу задать противоположные смещения? Например, такие:

P.pos 
{ 
  position: relative;
  left: 100px; right: 60px;
}

Элемент должен сместиться одновременно на 100 пикселов вправо (left: 100px) и на 60 пикселов влево (right: 60px).

Стандарт CSS2.1 утверждает, что в этом случае одному из смещений присваивается значение, противоположное другому, основному. В качестве основных называются смещения: left и top (right и top для языков с написанием справа налево).

Таким образом, для русского языка приведённое выше определение эквивалентно следующему:

P.pos 
{ 
  position: relative;
  left: 100px; right: -100px;
}

Или такому:

P.pos 
{ 
  position: relative;
  left: 100px; 
}