Кратко и понятно о Position – Relative, Absolute, Fixed, Sticky, Static – 2024

Cупер кратко не получилось, постарался без воды и максимально понятно. Полезный пример на codepen для изменения. Рекомендую накопировать несколько блоков, и назначить им разные значения для практического закрепления.

See the Pen Different position value. Example by sunnyblik (@sunnyblik) on CodePen.0

Static (default):

• По умолчанию для всех элементов. Элементы располагаются в нормальном потоке документа.
• Параметры top, left, right, bottom, z-index не применяются.
• Элементы не могут быть позиционированы относительно друг друга.
• Наследует размеры от своего родительского элемента

Relative:

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

Absolute:

• Удаляет элемент из обычного потока документа, и позиционирует заново, что позволяет позиционировать его относительно ближайшего родителя с position не static ( relative, absolute, fixed ); в отсутствие такового — относительно исходного контейнера документа.
• Элемент не занимает пространство в потоке документа, (т.е. следующие за ним элементы располагаются, как будто бы его нет, “накладываются на него”).
• Размеры больше не определяются родительским элементом. Для него нужно явно задавать ширину (если необходимо).

Fixed:

• Удаляет элемент из обычного потока документа, и позиционирует заново, при этом не занимает пространство в потоке документа, (т.е. следующие за ним элементы располагаются, как будто бы его нет, “накладываются на него”).
• Элемент фиксируется, оставаясь неподвижным при прокрутке страницы относительно окна браузера, или ближайшего родителя с трансформационными свойствами (transform, filter, perspective).
• Размеры больше не определяются родительским элементом. Для него нужно явно задавать ширину (если необходимо).

Sticky:

• Не удаляет элемент из обычного потока документа. При активации смещается относительно своего родителя, продолжает сохранять за собой место (не смещает все последующие элементы в потоке документа)
• Для активации требуется указание top, right, bottom, left.
• Элемент начинает “прилипать” к определенной позиции на экране при прокрутке. Это происходит в пределах ближайшего родительского элемент
• В активном и неактивном состоянии продолжает занимать место в потоке элементов. (т.е. другие элементы не смещаются, даже при его активации)
• Полезно для создания навигационных панелей и других элементов, которые должны оставаться видимыми при прокрутке.
• Наследует размеры от своего родительского элемента

Подробнее:

• Дока – https://doka.guide/css/position/ ,
• Документация – https://developer.mozilla.org/en-US/docs/Web/CSS/position