Урок 10. Позиционирование, z-index, overflow
⚡ Кратко
relative у родителя, absolute у ребёнка — базовая
пара для бейджей, крестиков и подсказок. inset-0 растягивает
элемент на весь родитель, sticky top-0 «прилипает» при прокрутке,
z-* задаёт слой, overflow-* решает, что делать
с выпирающим содержимым.
О чём этот урок
Позиционирование нужно там, где элемент должен выйти из обычного потока:
значок непрочитанных поверх иконки, кнопка закрытия в углу карточки, липкая
шапка таблицы, модальное окно на весь экран. Разберём все пять значений
position, семейство inset-*, слои
z-index и контекст наложения, а также прокрутку и обрезку.
Структура урока
Теория
Пять значений position, inset, слои и overflow.
Справочник
Классы позиционирования и прокрутки.
Примеры
Бейдж, крестик, липкая шапка, подложка, подсказка.
Старый vs Новый
Центрирование трансформацией против inset и flex.
Задания
Собрать карточку с меткой и липкую панель.
Решения
Готовые решения с разбором.
Ошибки
Забытый relative, война z-index, обрезанные подсказки.
Домашнее задание
Карточка товара с метками и липкой панелью.
Ресурсы
Документация по position и overflow.
Практика
- Поставьте счётчик уведомлений в правый верхний угол иконки.
- Сделайте шапку таблицы липкой при прокрутке.
- Разберитесь, почему подсказка обрезается, и почините.