В чем разница между видами позиционирования элементов

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