---
sidebar_position: 1
---

# Position

Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов.

Основные значения свойства position:

## Static
- Это значение используется **по умолчанию** для всех элементов.
- Элемент позиционируется в соответствии с нормальным потоком документа.
- Свойства `top`, `right`, `bottom`, `left` и `z-index` не применяются.

## Relative
- Элемент позиционируется относительно своего нормального положения.
- Можно использовать свойства `top`, `right`, `bottom`, `left` для смещения элемента относительно его исходного положения.
- Остальные элементы на странице не изменяют своего положения, как если бы элемент оставался на своем месте.

## Absolute
- Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего предка с позиционированием, отличным от `static` (например, `relative`, `absolute`, `fixed` или `sticky`).
- Если такого предка нет, элемент позиционируется относительно `<body>`.
- Можно использовать `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` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.

🚀 **_Источник: DeepSeek_**