Расскажи про свойство position

Свойство position в CSS

Свойство position определяет, как элемент позиционируется в документе. Это одно из самых важных CSS свойств, которое влияет на расположение и поведение элементов на странице.

Основные значения

1. static (значение по умолчанию)

Элемент позиционируется в нормальном потоке документа. Свойства top, right, bottom, left и z-index игнорируются:

.element {
  position: static; /* Это значение по умолчанию */
  top: 100px; /* Будет проигнорировано */
}

// HTML
const div = document.querySelector('div');
div.style.position = 'static';

2. relative

Элемент позиционируется относительно своей нормальной позиции. Занимает место в потоке, но смещается на заданные значения:

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
}

Оригинальное место элемента остается зарезервированным, но сам элемент смещается на 20px вниз и 30px вправо.

3. absolute

Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего предка с position не равным static. Если такого предка нет — позиционируется относительно документа:

.container {
  position: relative; /* Контекст позиционирования */
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

// Модальное окно в углу
const modal = document.querySelector('.modal');
modal.style.position = 'absolute';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';

4. fixed

Элемент удаляется из потока и позиционируется относительно viewport (окно браузера). Элемент остается на месте даже при прокрутке:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

Это часто используется для:

• Навигационных панелей
• Плавающих кнопок
• Модальных окон с затемнением фона

5. sticky

Элемент ведет себя как relative, пока не достигает определенного положения viewport, после чего становится как fixed:

.sticky-header {
  position: sticky;
  top: 0;
}

Это идеально для заголовков таблиц или меню, которые должны оставаться видимыми при прокрутке.

Контекст позиционирования

Для position: absolute и fixed элементы позиционируются относительно контекста позиционирования:

// Создание контекста для абсолютно позиционированного элемента
const container = document.querySelector('.container');
container.style.position = 'relative'; // Теперь это контекст

const child = container.querySelector('.child');
child.style.position = 'absolute';
child.style.top = '0';
child.style.left = '0';
// child позиционируется относительно .container

Свойства смещения

Для всех значений position кроме static работают свойства:

.positioned {
  position: relative;
  top: 20px;      /* Смещение вверх (отрицательное — вниз) */
  right: 30px;    /* Смещение влево (отрицательное — вправо) */
  bottom: 10px;   /* Смещение вверх */
  left: 15px;     /* Смещение вправо */
}

Практические примеры

Всплывающее меню:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

Центрирование элемента:

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Фиксированный footer:

body {
  display: flex;
  flex-direction: column;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Важные моменты

• z-index работает только с позиционированными элементами (не static)
• position: fixed может вызвать проблемы на мобильных устройствах
• Абсолютное позиционирование удаляет элемент из потока, что может сломать макет
• position: sticky имеет лучшую поддержку в современных браузерах, чем раньше

Понимание position критически важно для создания сложных макетов и интерактивных элементов в веб-разработке.