Мой Справочник | CSS | Позиционирование

Позиционирование
Код	Название	Описание
`position: static;`	*Статичное положение (по ум)**
`position: relative;`	Относительное позиционирование	Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, при этом другие элементы думают, что элемент стоит всё на том же месте, а сам спозиционированный элемент выходит из потока
`position: absolute;`	Абсолютное позиционирование	Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.
`position: fixed;`	Фиксированное позиционирование	Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
`position: sticky;`	Относительно-фиксированное позиционирование	Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
`top, right, bottom, left`	Координаты для позиционирования	Значения auto - неявные точки привязки, значения по ум, точка привязки по ум* - точка, где был бы элемент без абс. позиционирования, эту точку можно также изменять посредствам margin
`z-index`	Ось z	Чем больше это значение, тем выше отображается элемент по условной оси z

Позиционирование

Код

Название

Описание

position: static;

Статичное положение (по ум*)

position: relative;

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

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

position: absolute;

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

Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.

position: fixed;

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

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

position: sticky;

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

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

top, right, bottom, left

Координаты для позиционирования

Значения auto - неявные точки привязки, значения по ум, точка привязки по ум* - точка, где был бы элемент без абс. позиционирования, эту точку можно также изменять посредствам margin

z-index

Ось z

Чем больше это значение, тем выше отображается элемент по условной оси z

Обычные элементы

Относительные элементы

Абсолютные элементы

Обычные блоки

Текст Текст Текст Текст Текст Текст

Относительные блоки без смещения ведут себя как обычные

Текст Текст Текст Текст Текст Текст

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

Текст Текст Текст Текст Текст Текст

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

Текст Текст Текст Текст Текст Текст