Схемы позиционирования в 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