TGViewer
CSS mind CSS mind @css_mind · 2.65K subscribers
Post #34 2.41K
Схемы позиционирования в CSS

Свойство 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
More from @css_mind
  1. Aug 27, 2026Говорят верстать легко, а мне вот сегодня калькулятор с регрессиией понадобился P.S. Кстат…
  2. Jul 14, 2026Кстати если у вас разные конфиги для разных директорий (например у меня для работы один юз…
  3. Jul 9, 2026Просто напоминаю, что существует сайт на старомонгольском. У него уникальный режим письма:…
  4. May 18, 2026А вы знали, что next ломает вам типизацию перменных? Если вы напишите ... @property --var…
  5. May 12, 2026И еще сегодня очередной день рождения CSS2 🥳🎂 28 годиков. Старше меня!
  6. May 12, 2026Между прочим interpolate-size завезли в хром аж полгода назад. Смотрите что мы теперь може…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →