Свойства смещения

Три схемы позиционирования, описанные в предыдущем разделе, – relative, absolute и fixed – используют четыре разных свойства для описания смещения сторон позиционируемого элемента относительно его блока-контейнера. Эти четыре свойства, которые мы будем называть свойствами смещения (offset properties), делают большую часть работы по позиционированию.

Эти свойства описывают смещение относительно ближайшей стороны блока-контейнера (в соответствии со словом смещение (offset)). Например, свойство top описывает, на сколько должен отстоять верхний край поля позиционируемого элемента от верха его блока-контейнера. Для свойства top положительные значения перемещают верхний край поля позиционируемого элемента ниже, а отрицательные значения перемещают его выше верха его блока-контейнера. Аналогично свойство left описывает, насколько далеко вправо (для положительных значений) или влево отстоит левый край поля позиционируемого элемента относительно левого края блока-контейнера. Положительные значения будут сдвигать край поля позиционируемого элемента вправо, а отрицательные значения – влево. Можно взглянуть на это иначе: положительные значения обусловиливают смещения внутрь, передвигая края по направлению к центру блока-контейнера, а отрицательные – смещения наружу.

В исходной спецификации CSS2 сказано, что смещаются края содержимого, а не края поля, но это противоречило другим частям CSS2.


Ошибка была исправлена в последующем списке опечаток и в CSS2.1. Вычисление смещений выполняется по краям полей во всех активно разрабатываемых (на момент написания данной книги) броузерах. Как результат смещения краев полей позиционированного элемента в процессе его позиционирования перемещается все: и поля, и рамки, и отступы, и содержимое. Таким образом, для позиционированных элементов можно задавать поля, рамки и отступы; все это будет сохранено и останется в позиционированном элементе и будет находиться в области, определенной свойствами смещения. Важно помнить, что свойства смещения определяют смещение от аналогичной стороны (например, left определяет смещение от левой стороны) блока-контейнера, а не от его в-контейнера, задав такие значения:

top: 50%; bottom: 0; left: 50%; right: 0;

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

Большинство примеров данной главы касаются абсолютного позиционирования.


Поскольку абсолютное позиционирование является самой простой схемой для демонстрации принципа работы свойств top, right, bottom, мы будем придерживаться его. Обратите внимание, что позиционированный элемент имеет немного другой цвет фона. На рис. 10.26 у него нет полей, но если бы они были, то создавали бы пустое пространство между рамками и смещаемыми краями. При этом казалось бы, что позиционированный элемент не заполняет всю нижнюю правую четверть блока-контейнера. По правде говоря, он бы заполнял область, но этого не было бы видно. Таким образом, следующие два набора стилей имели бы примерно одинаковое представление, если предположить, что размер блока-контейнера равен 100em×100em.

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;
top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

Опять же подобие было бы только кажущимся. Задавая отрицательные значения, можно расположить элемент за пределами его блока-контейнера. Так, применение следующих значений приведет к результату: top: -5em; bottom: 50%; left: 75%; right: -3em; Кроме значений длины и процентных значений, для свойств смещения также может быть задано значение auto, устанавливаемое по умолчанию.


Для auto не определена какая-то конкретная схема поведения; оно меняется в зависимости от выбранного типа позиционирования. Принцип работы auto мы изучим в этой главе несколько позже при рассмотрении каждого из типов позиционирования.

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

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