Как значения свойства Position влияют на положение элемента в потоке

`position` определяет, как элемент позиционируется в документе: - **static** (по умолчанию) — элемент находится в обычном потоке, свойства `top`, `right`, `bottom`, `left` и `z-index` не применяются. - **relative** — элемент остается в потоке, но смещается относительно своего исходного положения с помощью `top`, `right` и др. Остальное пространство сохраняется, как если бы элемент не двигался. - **absolute** — элемент вырывается из потока, позиционируется относительно ближайшего позиционированного предка (не `static`). Если такого нет — относительно ``. - **fixed** — аналогично `absolute`, но относительно viewport (не двигается при скролле). - **sticky** — гибрид `relative` и `fixed`. Ведет себя как `relative`, пока не достигнет заданного offset (`top`, и т.д.), затем "прилипает" как `fixed`. ```css .box { position: sticky; top: 10px; /* начнет прилипать после 10px от верха viewport */ } ```