--- sidebar_position: 1 --- # Position Источник: DeepSeek Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов. Основные значения свойства position: ## Static - Элемент позиционируется в соответствии с нормальным потоком документа. - Свойства `top`, `right`, `bottom`, `left` и `z-index` не применяются. - Это значение используется по умолчанию для всех элементов. ## Relative - Свойство - по умолчанию - Элемент позиционируется относительно своего нормального положения. - Можно использовать свойства `top`, `right`, `bottom`, `left` для смещения элемента относительно его исходного положения. - Остальные элементы на странице не изменяют своего положения, как если бы элемент оставался на своем месте. ## Absolute - Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего предка с позиционированием, отличным от `static` (например, `relative`, `absolute`, `fixed` или `sticky`). - Если такого предка нет, элемент позиционируется относительно ``. - Можно использовать `top`, `right`, `bottom`, `left` для точного позиционирования. ## Fixed - Элемент фиксируется относительно окна браузера и не перемещается при прокрутке страницы. - Позиционируется относительно *viewport* (области просмотра). - Часто используется для создания фиксированных навигационных панелей или кнопок. ## Sticky - Элемент ведет себя как `relative`, пока не достигнет определенной точки прокрутки, после чего фиксируется на месте, как `fixed`. - Полезно для создания "липких" заголовков или меню, которые остаются видимыми при прокрутке. ## Дополнительные свойства для позиционирования: - `top`, `right`, `bottom`, `left`: - Эти свойства используются для точного позиционирования элемента относительно его контейнера или *viewport*. - Работают только с элементами, у которых `position` установлен в `relative`, `absolute`, `fixed` или `sticky`. - `z-index`: - Управляет порядком наложения элементов друг на друга (глубиной). - Работает только с элементами, у которых `position` не `static`. - Чем выше значение `z-index`, тем выше элемент находится в стеке. ## Важные моменты: - Элементы с `position: absolute` или `fixed` не влияют на расположение других элементов в потоке документа. - `z-index` работает только для элементов с позиционированием, отличным от `static`. - `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым. Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.