Урок 10. Старый vs Новый: трансформации и z-index

📁 Раздел: Раскладка ⏱️ Время изучения: ~45 мин 🎯 Сложность: Средняя

⚡ Кратко

Раньше центрировали абсолютным позиционированием и translate(-50%,-50%), а слои чинили числом 9999. Сейчас первое чаще решается flex или inset-0 m-auto, а второе — переносом элемента в портал.

Центрирование

❌ Абсолют плюс трансформация

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

Работает, но создаёт контекст наложения и мешает анимациям.

✅ Flex у родителя

Центр без трансформаций

<div class="relative flex h-32 items-center justify-center rounded-lg bg-slate-100">
  <div class="rounded-md bg-white px-4 py-2 text-sm shadow">Центр без трансформаций</div>
</div>

Или absolute inset-0 m-auto — если элемент фиксированного размера и должен оставаться абсолютным.

Война z-index

❌ Наращивание чисел

.dropdown { z-index: 999; }
.header   { z-index: 9999; }
.modal    { z-index: 99999; }

✅ Шкала и порталы

<header class="sticky top-0 z-10">…</header>
<div class="fixed inset-0 z-50">…</div>

Пять значений (z-10, z-20, z-30, z-40, z-50) покрывают потребности интерфейса. Если не хватает — проблема не в числах, а в контексте наложения.

Что нового

Приём	Раньше	Сейчас
Растянуть на родителя	четыре свойства `top/right/bottom/left`	`inset-0`
Логические стороны	только left/right	`start-`, `end-`
Изоляция слоёв	—	`isolate`
Карусели	JavaScript	`snap-x snap-center`
Якорь под липкой шапкой	отступ-заглушка	`scroll-mt-16`