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