Схемы позиционирования в CSS
Свойство position
определяет, какая из схем позиционирования используется для
вычисления положения бокса. Значения, отличные от static
, делают этот бокс
позиционированным боксом и заставляют его устанавливать иное позиционирование, содержащее
бокс для его потомков. Свойство имеет следующие значения:
static
Блок не позиционируется, а размещается в соответствии с правилами его родительского контекста
форматирования. Свойства inset-*
не применяются.
relative
Бокс позиционируется как статический, а затем смещается свойствами inset-*
относительно
полученной позиции. Это смещение является чисто визуальным эффектом и не влияет на размер или
положение любого другого блока, за исключением того, что оно увеличивает прокручиваемую область
переполнения его родителя. Эта схема позиционирования называется относительным
позиционированием.
sticky
Идентично относительному позиционированию, за исключением того, что смещения бокса автоматически
корректируются по отношению к области прокрутки ближайшего предка, являющегося контейнером прокрутки
(как изменено свойствами inset-*
), в любых осях, по которым свойства
inset-*
не являются автоматическими, чтобы попытаться сохранить бокс в поле зрения в
пределах. Эта схема позиционирования называется липким позиционированием.
absolute
Бокс выводится из потока, так что он не влияет на размер или положение своих соседей и предков и не
участвует в контексте форматирования своего родителя.
Вместо этого блок позиционируется и меняет размер исключительно в соответствии с его абсолютным
позиционированием, содержащим блок, как изменено свойствами inset-*
. Он может
перекрывать текущее содержимое или другие абсолютно позиционированные элементы и включается в
прокручиваемую область переполнения бокса, относительно которого позиционируется. Эта схема
позиционирования называется абсолютным позиционированием.
fixed
То же, что и absolute, за исключением того, что бокс позиционируется свойствами inset-*
и имеет размер относительно исходного содержащего блока (от области вьюпорта на
непрерывном носителе или от области страницы на страничном носителе). Положение блока фиксировано
относительно этого прямоугольника: он не перемещается при прокрутке документа и реплицируется на
каждой странице при разбивке на страницы. Эта схема позиционирования называется
фиксированным позиционированием и считается подмножеством абсолютного
позиционирования.
Источник: https://drafts.csswg.org/css-position-3/#position-property