Урок 18. Старый vs Новый: Позиционирование: static, relative, absolute, fixed, sticky

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~50 мин 🎯 Сложность: Начальная
#position #top #inset #z-index

⚡ Кратко

Хороший CSS не только даёт нужный вид, но и остаётся предсказуемым. Используйте position для наложения и привязки, а для отступов в потоке — margin/gap. Современный сдвиг записывайте через inset.

Сравнение подходов

1. Сдвиг в потоке: relative vs отступы

❌ Слабо: двигать layout через relative без причины

.title {
  position: relative;
  top: 18px;
  left: 12px;
}

Место элемента в потоке остаётся прежним, рядом появляются неожиданные пустоты, соседи не реагируют.

✅ Лучше: отступы или нормальная раскладка

.title {
  margin-top: 18px;
  margin-left: 12px;
}

Если нужен обычный сдвиг в потоке — это работа margin/gap, а не позиционирования.

2. Запись смещений: четыре свойства vs inset

❌ Многословно

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

✅ Современно: сокращение inset

inset: 0 растянул на весь родитель
.overlay {
  position: absolute;
  inset: 0;   /* = top/right/bottom/left: 0 */
}

Свойство inset поддерживается всеми современными браузерами и короче четырёх строк.