Народ, всем привет. CSS-свойство position одно из самых недооценённых, но фундаментальных в вёрстке. Оно определяет, как элемент располагается на странице и к чему он «привязан», к родителю, к окну браузера или к самому себе. Многие разработчики годами используют position по наитию, не до конца понимая механику, просто копируют его из предыдущего блока. Предлагаю это исправить, и сегодня мы разложим всё по полочкам, без магии, только логика и примеры. Каждый HTML-элемент изначально располагается в потоке документа...

Каждый элемент на веб-странице занимает место в нормальном потоке документа — как книги на полке библиотеки: каждая стоит там, где ей положено по порядку. Свойство position позволяет вырвать элемент из потока (или не вырывать — зависит от значения) и управлять его положением относительно чего-то: родителя, окна, скролла. Это не «переместить пиксель влево» — это изменение контекста позиционирования. Значение по умолчанию. Элемент остаётся в нормальном потоке. Свойства top, right, bottom, left, z-index игнорируются...