Позиционирование

position определяет, как элемент позиционируется в потоке документа. static — стандартное расположение. relative — смещение от своего места. absolute — позиция относительно ближайшего positioned предка. fixed — прикреплён к окну. sticky — гибрид: normal, пока не достигнут порог (threshold), затем fixed. z-index управляет порядком наложения.

Значения position:

static (по умолчанию):

• Элемент в normal flow
• top/right/bottom/left ИГНОРИРУЮТСЯ

relative:

• Элемент остаётся в normal flow
• top/right/bottom/left сдвигают ОТНОСИТЕЛЬНО своего места
• Создаёт контекст для абсолютных детей

absolute:

• Выходит из normal flow (не занимает место)
• Позиционируется относительно ближайшего positioned предка (relative/absolute/fixed/sticky)
• Если positioned предка нет — относительно <html>

fixed:

• Выходит из normal flow
• Позиционируется относительно ОКНА браузера
• Не скроллится
• Создаёт новый stacking context

sticky:

• Гибрид: relative + fixed
• Пока не достигнут порог (threshold) — ведёт себя как relative
• Когда порог (threshold) достигнут — фиксируется (как fixed)
• Работает внутри scroll-контейнера

z-index:

• Порядок наложения (stacking order)
• Число — чем больше, тем «поверх»
• Работает внутри контекста наложения (stacking context)
• position (relative/absolute/fixed/sticky) — один из способов создать такой контекст, но НЕ единственный
• Контекст наложения также создают: opacity < 1, transform, filter, will-change и другие свойства

Важно: z-index НЕ требует position. Это распространённый миф. Элемент с position — самый частый способ попасть в контекст наложения, но не единственный.

Позиционирование — как расстановка мебели. static — мебель стоит где поставили. relative — чуть сдвинули. absolute — подняли и поставили в точку (относительно стены). fixed — приклеили к стене (всегда на виду). sticky — на полу, но прилипает к ноге при ходьбе.

**Самый простой:**

.parent {
  position: relative;
}

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

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

Базовые паттерны: absolute в контейнере, sticky-заголовок.

**Простой:**

/* Sticky-навигация */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  padding: 1rem;
}

/* Бейдж на аватаре */
.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: #27ae60;
  border-radius: 50%;
  border: 2px solid white;
}

/* fixed кнопка */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 50;
}

Sticky-навигация, бейджи и fixed-кнопки.

**Реальный пример:**

/* Оверлей */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: grid;
  place-items: center;
}

.modal {
  position: relative;
  background: white;
  padding: 2rem;
  border-radius: 12px;
  z-index: 1001;
}

/* Tooltip */
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem;
  background: #333;
  color: white;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}

/* Sticky-колонка в таблице */
.table-wrapper {
  overflow-x: auto;
}

th.sticky {
  position: sticky;
  left: 0;
  background: white;
  z-index: 5;
}

Оверлеи, тултипы и sticky-колонки — реальные кейсы. Это пример будущей темы: display: grid и place-items разбираются в уроке про Grid (C15).

**Неправильно:** Думать, что z-index требует position

**Почему:** z-index работает на элементах с: position, opacity < 1, transform, filter, will-change. Не только position!

**Правильно:** z-index работает на любом элементе, создающем stacking context. Position — один из способов.

**Неправильно:** Не задавать parent position для absolute child

**Почему:** Без positioned parent absolute-элемент позиционируется относительно <html> — непредсказуемо.

**Правильно:** Для absolute-дочерних элементов: родитель должен иметь position: relative (или absolute/fixed).

**Неправильно:** Использовать fixed вместо sticky

**Почему:** Fixed всегда на экране (может перекрывать контент). Sticky — только в рамках scroll-контейнера.

**Правильно:** Для «прилипающих» заголовков: sticky. Для «всегда на экране»: fixed.

• relative — смещение от своего места, создаёт контекст
• absolute — позиция от positioned предка
• fixed — прикреплён к окну браузера
• sticky — гибрид relative + fixed
• z-index — порядок наложения (не требует только position!)

Назад: Вы знаете overflow (C11) — позиционирование позволяет элементам выходить из обычного потока документа.

Вперёд: В следующем уроке (C13) вы изучите основы Flexbox: display: flex и понятие главной оси.