5 вещей, которые вы не знали о типах позиционирования CSS

В этой статье мы более подробно разберем несколько малоизвестных аспектов, связанных с методами позиционирования CSS. Но сначала кратко рассмотрим доступные на сегодняшний день типы позиционирования. Такие, как CSS position relative.

Обзор доступных типов позиционирования CSS

Свойство CSS position позволяет задать тип позиционирования элемента.

Параметры позиционирования CSS

Static – это значение свойства по умолчанию. То есть для элемента не задана позиция. Чтобы позиционировать его, мы должны изменить предопределенный тип.

Для этого мы задаем одно из следующих значений:

• position relative CSS;
• absolute;
• fixed;
• sticky.

Только после этого можно использовать свойства выравнивания, чтобы указать нужное положение для нашего элемента:

• top;
• right;
• bottom;
• left.

Начальное значение этих свойств - auto.

Элемент, для свойства position которого устанавливается значение absolute или fixed, называется абсолютно позиционированным элементом. Обратите внимание, что при позиционировании элемента может использоваться свойство z-index, чтобы указать его место в стеке.

Основные отличия свойств позиционирования CSS

Кратко рассмотрим три основных различия между доступными типами позиционирования:

• Абсолютно позиционированный элемент полностью удаляется из нормального потока. Соседние элементы того же уровня занимают его пространство;
• За элементами с CSS position relative или stickily сохраняется их пространство. Соседние элементы не могут занимать пространство, отведенное для него. Но под смещение этого элемента не отводится места. Смещения полностью игнорируются, и в результате элементы могут накладываться друг на друга;
• fixed (подкатегория абсолютного позиционирования) - всегда позиционируется относительно окна просмотра. За исключением родительского элемента, который имеет свойство transform. Последние версии всех браузеров поддерживает такое поведение;
• sticky – элемент позиционируется относительно ближайшего родительского элемента с полосой прокрутки. Если такой родительский элемент отсутствует, то позиционирование происходит относительно окна просмотра.

Как работают все эти типы, можно увидеть в следующем демо:

Примечание: Значение sticky по-прежнему рассматривается как экспериментальная технология с ограниченной поддержкой браузерами. Конечно, можно использовать полифилл (например, stickyfill), чтобы добавить этот функционал для браузеров, которые изначально не поддерживают его.

Позиционирование элементов с типом absolute

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

В приведенной ниже демо-версии проиллюстрировано данное поведение:

В примере мы задаем зеленому полю тип позиционирования absolute со значением смещения bottom:0 и left:0. Кроме этого мы не указываем тип позиционирования для его прямого родителя (красное поле).

В то же время мы позиционируем относительно элемент с классом jumbotron. Обратите внимание, как положение зеленого поля изменяется по мере того, как мы меняем тип позиционирования родительского элемента.

Абсолютно позиционированные элементы игнорируют свойство float

Если элемент перемещается влево или вправо, и при этом мы устанавливаем для него тип позиционирования absolute или fixed, то значение свойства float становится равным none. Но если мы устанавливаем тип позиционирования position relative CSS, элемент остается плавающим.

Посмотрите приведенное ниже демо:

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

Встроенные элементы, позиционированные абсолютно, ведут себя как блочные элементы

Встроенный элемент, который позиционирован, как absolute или fixed, приобретает характеристики элементов уровня блока.

Мы определяем два различных элемента. Первый из них (зеленое поле) является блочным элементом (т.е. div). Второй (красное поле) является встроенным элементом (span). Обратите внимание, что у нас отображается только зеленое поле.

Красное поле не видно, потому что мы задаем для него свойства width и height, которые могут быть применены только к блочным и встроенным блочным элементам. И это пустой элемент (т.е. он не содержит вложенных или дочерних элементов).

Если мы устанавливаем для него тип позиционирования absolute или fixed, элемент становится видимым, потому что ведет себя как блочный элемент.

У абсолютно позиционированных элементов поля не объединяются

По умолчанию, когда два вертикальных поля соприкасаются друг с другом, они объединяются в одно, позиционирование которого определяет большее из значений этих полей. Такое поведение называется объединением полей.

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

Рассмотрим следующий пример:

В этой демо-версии элемент изначально имеет поля 20px. Кроме этого его верхнее поле объединяется с верхним полем родительского элемента, которое также равно 20px. Как видите, верхнее поле не объединяется с соответствующим полем родительского элемента только тогда, когда мы позиционируем элемент абсолютно, а не CSS position relative top left.

Чтобы предотвратить объединение полей, нужен небольшой отступ или рамка. Мы должны применить это правило к родительскому или дочернему элементу. Другой вариант - добавить класс clearfix (в нашем примере) для родительского элемента.

Позиционирование элементов в пикселях и процентах

Вы когда-нибудь использовали проценты вместо пикселей для CSS position relative по центру? Если да, то вы заметили, что вычисленные значения смещения различны в зависимости от единиц измерения CSS (пикселей или процентов), которые вы используете.

Посмотрим, что говорится о смещениях, которые объявляются в процентах, в спецификации:

Смещение – это процент от ширины (для left или right) или высоты (для top и bottom) блока, содержащего элемент. Для элементов с позиционированием stickily смещение представляет собой процент от ширины (left или right) или высоты (для top и bottom) окна. Допускаются отрицательные значения. Когда мы определяем значение смещения в процентах, положение целевого элемента зависит от ширины (для смещения left или right) и высоты (для смещения top и bottom) его родительского элемента.

Приведенное ниже демо иллюстрирует эту разницу:

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

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

Примечание: Свойство transform (вместе с различными функциями translate) также позволяет изменить положение элемента. Но если мы будем использовать проценты, элемент будет позиционироваться относительно своих размеров, а не относительно размеров родительского элемента (в отличие от смещений).

Заключение

Надеюсь, что эта статья помогла вам получить четкое представление о методах позиционирования CSS.