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

Самая простая для понимания схема позиционирования – относительное позиционирование. В этом случае позиционированный элемент сдвигается за счет применения свойств смещения. Однако это может иметь некоторые интересные последствия. На первый взгляд все кажется довольно простым. Предположим, вы хотите сдвинуть изображение вверх и влево:

img {position: relative; top: -20px; left: -20px;}

Здесь всего лишь смещен верхний край изображения на 20 пикселов вверх и левый край на 20 пикселов влево. Однако обратите внимание на пустое место там, где должно было бы находиться изображение, если бы не было позиционировано. Дело в том, что когда элемент позиционирован относительно, он сдвигается со своего обычного места, но пространство, которое он должен был бы занимать, не исчезает:

em {position: relative; top: 8em; color: gray;}

Как видите, в абзаце есть пропуск. Это то место, где должен был бы находиться элемент em, и пространство, занимаемое элементом em в его новом местоположении, точно соответствует области, им оставленной. Конечно, относительно позиционированный элемент можно передвинуть так, что он будет перекрывать другое содержимое:

img.slide {position: relative; left: 30px;}


In this paragraph, we will find that there is an image that has been pushed
to the right.


It will therefore A star! overlap content nearby, assuming that it is not the last element in
its line box.



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

strong {position: relative; top: 10px; bottom: 20px;}

Здесь мы имеем значения, предусматривающие две совершенно разные схемы поведения. Если учитывать только top: 10px, то элемент следует сместить вниз на 10 пикселов, но значение bottom: 20px четко требует сместить элемент на 20 пикселов вверх. Исходная спецификация CSS2 не говорит, что должно произойти в этом случае. CSS2.1 утверждает, что когда речь идет о сверхограниченном относительном позиционировании, одному из значений присваивается значение, противоположное другому. Таким образом, bottom всегда эквивалентно –top. Это означает, что предыдущий пример был бы интерпретирован так, как если бы имел вид:

strong {position: relative; top: 10px; bottom: -10px;}

Таким образом, элемент strong будет смещен вниз на 10 пикселов.


Спецификация также учитывает направление написания. При относительном позиционировании right всегда эквивалентно –left для языков с написанием слева направо, но в языках с написанием справа налево все наоборот: left всегда эквивалентно –right.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание