Урок 10. Частые ошибки

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

⚡ Кратко

Забытый relative, липкий элемент внутри overflow-hidden, рост чисел z-index, подсказки, перехватывающие клики.

Ошибка 1. Абсолютный элемент улетел в угол страницы

Как ломается: бейдж оказывается в правом верхнем углу экрана, а не карточки.

❌ Родитель без relative

<div class="rounded-xl border">
  <span class="absolute top-2 right-2">Новинка</span>
</div>

✅ Родитель — якорь

<div class="relative rounded-xl border">
  <span class="absolute top-2 right-2">Новинка</span>
</div>

Ошибка 2. sticky не липнет

Как ломается: класс есть, поведение обычное.

Три причины по частоте:

  1. не указана сторона: нужен sticky top-0;
  2. у предка стоит overflow-hidden или overflow-auto;
  3. родитель не выше липкого элемента — прилипать некуда.

Ошибка 3. z-index растёт до 9999

Как ломается: каждый новый компонент «побеждает» предыдущий, и в проекте появляются числа-рекордсмены.

Почему: проблема почти всегда в контексте наложения, а не в величине. Проверьте предков на transform, opacity, filter — любой из них запирает потомков в своём слое. Решение — портал или isolate на нужном уровне.

Ошибка 4. Подсказка мешает нажать кнопку

❌ Перехватывает курсор

<span class="absolute inset-0 opacity-0 group-hover:opacity-100">Подсказка</span>

✅ Прозрачна для событий

<span class="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100">Подсказка</span>

Ошибка 5. fixed внутри трансформированного блока

Если у предка есть transform (например, hover:scale-105), fixed-потомок начинает отсчитываться от этого предка, а не от окна. Модальное окно внезапно «прилипает» к карточке. Лечится тем же способом: выносом наружу.

Ошибка 6. overflow-hidden вместо min-w-0

Когда flex-раскладка «распирается» длинным текстом, соблазнительно поставить overflow-hidden родителю. Это прячет симптом: текст обрезается без многоточия, а подсказки внутри перестают показываться. Правильное лечение — min-w-0 и truncate (урок 08).