CSS Position

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

Пять распространённых значений следующие:

Элементы могут бытьtop、right、bottomиleftНастраивайте положение с помощью этих свойств, но эти свойства вступают в силу только когдаposition(и значение неstatic) задано.

Статическое позиционирование

Значение по умолчанию для HTML-элементов, то есть отсутствие позиционирования, подчиняется обычному объекту потока документа.

На статически позиционированные элементы не влияют top, bottom, left, right.

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

Положение элемента фиксировано относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Примечание:Фиксированное позиционирование требует объявления !DOCTYPE для поддержки в IE7 и IE8.

Фиксированное позиционирование делает положение элемента не зависящим от потока документа, поэтому он не занимает места.

Элементы с фиксированным позиционированием перекрываются с другими элементами.

Относительное позиционирование

Позиционирование элемента с относительным позиционированием задается относительно его обычного положения.

Перемещение элемента с относительным позиционированием не изменяет место, которое он изначально занимал.

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

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

Положение элемента с абсолютным позиционированием определяется относительно его ближайшего позиционированного родительского элемента. Если у элемента нет позиционированного родителя, то его положение определяется относительно <html>:

Абсолютное позиционирование делает положение элемента независимым от потока документа, поэтому он не занимает места.

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

Липкое позиционирование

Буквальное значение английского слова sticky — «stick» или «adhere», поэтому его можно назвать липким позиционированием.

position: sticky;Позиционирование зависит от положения прокрутки пользователя.

Элементы с липким позиционированием зависят от прокрутки пользователя, и когдаposition:relativeиposition:fixed, они переключаются между положениями.

Он ведёт себя так же, какposition:relative;А когда страница прокручивается за пределы целевой области, его поведение похоже наposition:fixed;, он будет зафиксирован в целевом положении.

Позиционирование элемента ведёт себя как relative до пересечения определённого порога и как fixed после этого.

Этот конкретный порог относится к одному из значений top, right, bottom или left. Иными словами, липкое позиционирование вступает в силу только когда указан один из четырёх порогов top, right, bottom или left. В противном случае его поведение такое же, как при relative-позиционировании.

Примечание:Internet Explorer, Edge 15 и более ранние версии IE не поддерживают липкое позиционирование. Safari требует префикс -webkit- (см. пример ниже).

Перекрывающиеся элементы

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

Свойство z-index задаёт порядок наложения элемента (какой элемент должен быть спереди или сзади).

Элемент может иметь положительный или отрицательный порядок наложения:

Элементы с более высоким порядком наложения всегда находятся перед элементами с более низким порядком наложения.

Примечание:Если два позиционированных элемента перекрываются и z-index не указан, элемент, расположенный последним в HTML-коде, будет отображаться спереди.

Другие примеры

Обрезка формы элемента

Этот пример демонстрирует, как задать форму элемента. Элемент обрезается по этой форме и отображается.

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

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

Как настроить автоматическую обработку переполнения в браузере

Этот пример демонстрирует, как настроить браузер на автоматическую обработку overflow.

Изменение курсора

Этот пример демонстрирует, как изменить курсор.

Все свойства позиционирования CSS

Числа в столбце "CSS" указывают, какая версия CSS (CSS1 или CSS2) определила свойство.