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

Фиксированное позиционирование

Элемент с заданным свойством position:fixed фиксируется относительно области просмотра. Он остается там, где есть, даже если документ прокручивается. Для media="print" фиксированный элемент будет повторяться на каждой печатной странице.

Отметим, что Internet Explorer версии 6 и более старых версий вообще не поддерживает фиксированное позиционирование. При использовании одного из этих браузеров вы не сможете увидеть результаты примеров из этого раздела.

В то время как позиция и размеры элемента с position:absolute определяются относительно его объемлющего блока, позиция и размеры элемента с position:fixed всегда определяются относительно начального объемлющего блока. Это обычно будет область просмотра: окно браузера или бокс страницы бумаги.

Чтобы продемонстрировать это, в примере ниже мы сделаем один из элементов фиксированным. Другой элемент сделаем очень высоким, чтобы вызвать появление полосы прокрутки, чтобы можно было легче увидеть создаваемый результат.

1. Сделайте следующие изменения в коде CSS:

#inner {
  width: 5em;
  height: 5em;
  background-color: #999;
  position: fixed;
  top: 1em;
  left: 1em;
}

#second {
  width: 5em;
  height: 150em;
  background-color: #00f;
  position: absolute;
  top: 1em;
  left: 2em;
}

2. Сохраните и перезагрузите документ. Если вертикальная полоса прокрутки не появится, увеличьте значение height для #second. (Какой, однако, должен быть огромный монитор?)

Высокий синий элемент расширяется ниже окна. Прокрутите страницу вниз, и удерживайте взгляд на сером квадрате в верхнем левом углу. #inner теперь зафиксирован в позиции 1em от верха окна и 1em от левой стороны, поэтому при прокрутке серый бокс остается в одном и том же месте на экране.

Заключение

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

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

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

Позиции каждого края абсолютно позиционированного элемента можно определить с помощью свойств top, right, bottom и left. Значение каждого свойства определяет расстояние от этого края до соответствующего края объемлющего блока элемента.

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

Контрольные вопросы

• Отмените изменения в примере с фиксированным позиционированием и затем измените порядок стека четырех абсолютно позиционированных квадратов, так чтобы серый квадрат был внизу, а затем шли синий, желтый и голубой квадраты в данном порядке. (Совет: удалите все объявления z-index и начните сначала.)
• Переместите желтый квадрат вверх и вправо, задавая top:-1em и left:8em. Затем сделайте так, чтобы он появился позади элемента #outer, чтобы красная граница пересекала желтый квадрат.
• Повторите трех-столбцовую компоновку, созданную в статье о статическом и относительном позиционировании, используя вместо этого абсолютное позиционирование. Так как будет невозможно создать нижний колонтитул во всю ширину, можно удалить элемент #footer, но больше ничего изменять в разметке не разрешается (кроме ссылки на таблицу стилей).
• Модифицируйте компоновку из предыдущего упражнения, чтобы навигация использовала фиксированное позиционирование. Нужно будет удалить автоматические горизонтальные поля на элементе body, чтобы это было возможно. Добавьте достаточно контента в основной столбец и/или боковую панель, чтобы появилась панель прокрутки, чтобы можно было проверить, что все работает.

Об авторе

Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.

Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.