position свойства CSS определяют метод позиционирования элемента. static — это поведение по умолчанию в потоке документа, тогда как relative позволяет смещать элемент, сохраняя его место. absolute и fixed выводят элемент из потока, позиционируя его относительно ближайшего позиционированного предка или окна просмотра соответственно. sticky сочетает в себе relative и fixed, "прилипая" при прокрутке.

CSS-свойство position управляет тем, как элемент размещается на веб-странице. position: static — это значение по умолчанию для всех элементов; они располагаются в обычном потоке документа, и свойства смещения, такие как top или left, не влияют на их положение. Когда используется position: relative, элемент остаётся в потоке, но при этом можно задать смещение относительно его исходной позиции с помощью свойств top, right, bottom и left. Важно, что место, которое элемент занимал бы без смещения, сохраняется, и другие элементы не занимают это пространство.

position: absolute полностью выводит элемент из обычного потока документа. Это означает, что он больше не влияет на расположение соседних элементов, которые ведут себя так, будто абсолютного элемента не существует. Позиция абсолютного элемента определяется относительно ближайшего позиционированного предка (то есть, предка, у которого position не static). Если такого предка нет, элемент позиционируется относительно начального блока содержимого (обычно <html>).

Элемент с position: fixed также выводится из потока документа, но его позиция всегда привязана к окну просмотра (viewport). Это означает, что при прокрутке страницы элемент с position: fixed остаётся на одном и том же месте на экране. Такое поведение полезно для создания постоянных навигационных панелей, кнопок возврата наверх или всплывающих окон, которые должны быть всегда видны.

position: sticky является гибридным позиционированием, сочетающим relative и fixed. Элемент ведёт себя как relative до тех пор, пока он находится в пределах своей обычной области прокрутки. Однако, когда он достигает определённой точки в окне просмотра (заданной свойствами top, right, bottom или left), он "прилипает" и начинает вести себя как fixed элемент. Он будет оставаться в этой "прилипшей" позиции, пока его родительский контейнер не выйдет за пределы окна просмотра.

Пример использования всех видов позиционирования: