CSS Макет - Свойство position

Свойство position указывает тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или закрепленный - static, relative, fixed, absolute или sticky).

Свойство position

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

Есть пять разных значений position (позиции):

• static - статический
• relative - относительный
• fixed - фиксированный
• absolute - абсолютный
• sticky - закреплённый

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

position: static;

HTML-элементы по умолчанию расположены статически.

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

Элемент с position: static; не позиционируется каким-либо особым образом; он всегда располагается в соответствии с обычным потоком страницы:

Вот CSS, который используется:

position: relative;

Элемент с position: relative; позиционируется относительно своего нормального положения.

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

Вот CSS, который используется:

position: fixed;

Элемент с position: fixed; располагается относительно области просмотра, что означает, что он всегда остается на том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.

Фиксированный (fixed) элемент не оставляет пробела на странице, где он обычно находился бы.

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

position: absolute;

Элемент с position: absolute; позиционируется относительно ближайшего позиционированного предка (вместо позиционирования относительно окна просмотра, как фиксированный).

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

Примечание: "Позиционируемый" элемент - это тот, чья позиция что угодно, кроме static.

Вот простой пример:

Вот CSS, который используется:

position: sticky;

Элемент с position: sticky; (прикреплённый) позиционируется на основе позиции прокрутки пользователя.

Элемент sticky переключается между relative и fixed, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не будет достигнута заданная позиция смещения, а затем он "закрепится" на месте (например, position:fixed).

В этом примере sticky элемент придерживается верхней части страницы (top: 0), когда вы достигнете своей позиции прокрутки.

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

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

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

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

Это заголовок

Поскольку изображение имеет z-index -1, оно будет помещено за текстом, т.е. текст будет находится сверху изображения.

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

Позиционирование текста в изображении

Как разместить текст поверх изображения:

Пример

Снизу слева

Сверху слева

Сверху справа

Снизу справа

По центру

Попробуйте сами:

Вверху слева » Вверху справа » Снизу слева » Снизу справа » По центру »

Больше примеров

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

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