Урок 46. Ошибки: Типичные ошибки вёрстки

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#width #height #margin-left #color #overflow

⚡ Кратко

Топ-грабли раскладки: 100vw, забытый box-sizing, фиксированная высота, !important, overflow:hidden поверх симптома и проверка только на десктопе.

Грабли №1: z-index «не работает»

Очень частый сбой раскладки: ставишь огромный z-index, а элемент всё равно под соседом. Причина почти всегда — z-index действует только на позиционированные элементы и сравнивается внутри одного контекста наложения.

❌ z-index без position — не действует

A
B z:9999

✅ добавили position:relative — B сверху

A
B z:2
/* ❌ z-index игнорируется у статичного элемента */
.box-b { z-index: 9999; }

/* ✅ z-index работает только с position */
.box-b { position: relative; z-index: 2; }

Остальные частые ошибки

  • width: 100vw на блоке. Даёт горизонтальный скролл из-за ширины полосы прокрутки. Лечение: max-width: 100%.
  • Забыли box-sizing: border-box. Блок с width: 100%; padding вылезает за контейнер. Задайте box-sizing глобально.
  • Фиксированная height. Режет длинный контент. Используйте min-height.
  • !important для перекрытия чужого стиля. Запускает войну специфичности. Сначала почините архитектуру селекторов.
  • overflow: hidden как «лечение» переполнения. Заодно срезает тени, выпадашки и подсказки. Устраняйте причину, а не симптом.
  • Проверка только на широком десктопе. Откройте макет на 320px — там вылезают почти все дефекты раскладки.
⚠️ Проверить по документации: правила контекста наложения (stacking context) сложнее, чем «нужен position» — его создают также opacity < 1, transform, filter и др. Подробности — MDN «The stacking context» и урок 19 про z-index.

Навигация