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

Введение

Теперь пришло время обратить наше внимание на вторую пару значений свойства position - absolute и fixed. Первая пара значений - static и relative - тесно связаны, и мы рассмотрели их достаточно подробно в предыдущей статье.

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

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

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

Статья имеет следующую структуру:

Объемлющие блоки 
Абсолютное позиционирование 
	Определение позиции 
	Определение размеров 
	Третье измерение - z-индекс 
		Локальные контексты стеков 
Фиксированное позиционирование 
Заключение 
Контрольные вопросы

Прежде чем говорить обо всем этом, рассмотрим важную предварительную концепцию - объемлющие блоки.

Объемлющие блоки

Существенно важной концепцией, когда речь идет об абсолютном позиционировании, является объемлющий блок: блочный бокс, относительно которого определены позиция и размеры абсолютно позиционированного бокса.

Для статических боксов и относительно позиционированных боксов объемлющий блок является ближайшим предком блочного уровня - элемент предок, другими словами. Для абсолютно позиционированных элементов, однако это немного сложнее. В этом случае объемлющий блок является ближайшим позиционированным предком. Под "позиционированным" понимается элемент, свойство position которого задано как relative, absolute или fixed - иными словами, любой элемент, кроме обычных статических элементов.

Поэтому, задавая для элемента position:relative, мы делаем его объемлющим блоком для любого абсолютно позиционированного потомка (элементов потомков), появятся ли они непосредственно ниже относительно позиционированного элемента в иерархии, или ниже по иерархии.

Если абсолютно позиционированный элемент не имеет позиционированного предка, то объемлющий блок называют иногда "начальным объемлющим блоком", что на практике совпадает с элементом html. При просмотре Web-страницы на экране это означает окно браузера, при печати страницы это означает границу страницы.

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

Итак, давайте суммируем это в множестве простых шагов - чтобы найти объемлющий блок для элемента с position:absolute, необходимо сделать следующее:

1. Посмотрите на элемент предок абсолютно позиционированного элемента - имеет ли свойство position этого элемента одно из значений relative, absolute или fixed?
2. Если это так, то вы нашли объемлющий блок.
3. Если нет, перейдите в элемент предок элемента предка и повторите с шага 1, пока не найдете объемлющий блок или закончатся элементы предки.
4. Если вы дошли до элемента html, не найдя размещенного предка, то объемлющим элементом будет элемент html.

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

Фиксированное позиционирование является специальной формой абсолютного позиционирования, поэтому мы рассмотрим его позже, и сосредоточимся здесь на более общем случае. Если не сказано другое, то при использовании термина "абсолютное позиционирование" с данного момента и до конца статьи будут подразумеваться элементы, имеющие position:fixed или position:absolute.