Абсолютное позиционирование
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Установить этот тип можно через значение 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. Имитация фреймов
Плов народов мира
Плов узбекский
Плов сибирский
Плов итальянский
Плов эстонский
Плов по-американски
Плов по-индейски
Положить в казан нарезанное кусочками мясо и поджарить его до образования корочки. Нашинкованный кольцами лук жарить вместе с мясом до красноватого цвета, затем добавить морковь, нарезанную соломкой. Положить половину соли, всё перемешать и жарить, пока морковь не приобретёт золотисто-коричневый цвет. После этого налить половину необходимого количества воды и дать закипеть.
Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.
Тщательно перемешайте готовый плов, переложите в большое блюдо, сверху разложите мясо.
Результат данного примера показан на рис. 2. Элемент выводится в потоке как обычно, а для sidebar и content установлено абсолютное позиционирование.
Рис. 2. Имитация фреймов на веб-странице
Тот же самый приём, когда мы задаём размеры элемента с помощью свойств left , right , top и bottom , применяется для создания разных эффектов. К примеру, можно сделать затемнение веб-страницы для вывода сообщения и привлечения к нему внимания. В примере 2 добавляется элемент с классом overlay , размеры которого занимают всю область просмотра. Делаем его полупрозрачного чёрного цвета, а поверх отображаем блок с классом dialog , который выводится по центру горизонтали.
Пример 2. Затемнение веб-страницы
Результат данного примера показан на рис. 3.
Рис. 3. Диалоговое окно с затемнением
Обратите внимание, что для вывода абсолютно позиционированного элемента по центру горизонтали применяется следующий стиль.
Таким образом, сочетание width , left , right и margin управляет выравниванием элементов.
Абсолютное позиционирование позволяет также скрывать элементы. Для этого часто добавляется стиль left: -9999px , который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда мы скрываем настоящий флажок, а вместо него стилизуем элемент , связанный с и выполняющим его функции (пример 3).
Пример 3. Стилизация флажка