Абсолютное позиционирование

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью» или «областью просмотра» (рис. 1).

Рис. 1. Значения свойств left, right, top и bottom при абсолютном позиционировании

Для элемента с абсолютным позиционированием характерны следующие особенности.

• Ширина элемента, если она не задана явно, определяется шириной содержимого плюс значения padding, border и margin.
• Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom.
• Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой элемента, но уже участвуют свойства top, bottom и height.
• Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.
• Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. То же относится и к свойству top, только элемент уйдёт за верхний край.
• Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.
• Элемент перемещается вместе с документом при его прокрутке.
• Работает свойство z-index, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов следует назначить свойство overflow со значением auto. Тогда, если содержимое превысит высоту видимой области, появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты (пример 1).

Пример 1. Имитация фреймов

Результат данного примера показан на рис. 2. Элемент <header> выводится в потоке как обычно, а для sidebar и content установлено абсолютное позиционирование.

Рис. 2. Имитация фреймов на веб-странице

Тот же самый приём, когда мы задаём размеры элемента с помощью свойств left, right, top и bottom, применяется для создания разных эффектов. К примеру, можно сделать затемнение веб-страницы для вывода сообщения и привлечения к нему внимания. В примере 2 добавляется элемент с классом overlay, размеры которого занимают всю область просмотра. Делаем его полупрозрачного чёрного цвета, а поверх отображаем блок с классом dialog, который выводится по центру горизонтали.

Пример 2. Затемнение веб-страницы

Результат данного примера показан на рис. 3.

Рис. 3. Диалоговое окно с затемнением

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

.dialog {
  width: 260px;
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
}

Таким образом, сочетание width, left, right и margin управляет выравниванием элементов.

Абсолютное позиционирование позволяет также скрывать элементы. Для этого часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда мы скрываем настоящий флажок, а вместо него стилизуем элемент <label>, связанный с <input> и выполняющим его функции (пример 3).

Пример 3. Стилизация флажка