Урок 10. Справочник: position, inset, z-index, overflow

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

⚡ Кратко

relative/absolute/fixed/sticky, смещения inset-*, слои z-*, прокрутка overflow-*.

position

КлассCSSКомментарий
staticposition: staticпо умолчанию
relativeposition: relativeякорь для абсолютных детей
absoluteposition: absoluteвыпадает из потока
fixedposition: fixedпривязка к окну
stickyposition: stickyобязательно с top-* или другой стороной

Смещения

КлассCSS
inset-0все стороны 0
inset-x-0, inset-y-4горизонталь / вертикаль
top-0, right-4, bottom-2, left-6отдельные стороны
start-0, end-0логические стороны
-top-2отрицательное смещение — элемент выходит за границу
top-1/2, left-1/2проценты
inset-autoсброс

Слои

КлассЗначениеТипичное применение
z-00базовый слой
z-1010липкая шапка
z-2020выпадающее меню
z-4040подложка модального окна
z-5050модальное окно, уведомления
-z-10−10декоративный фон под контентом
isolateisolation: isolateсоздать свой контекст наложения
Договоритесь в проекте о шкале слоёв заранее: шапка — 10, меню — 20, оверлеи — 40, модальные окна — 50. Числа вроде z-[9999] — признак того, что шкалы нет.

Прокрутка и обрезка

КлассЧто делает
overflow-hiddenобрезать выходящее содержимое
overflow-auto, overflow-y-autoпрокрутка при необходимости
overflow-x-autoгоризонтальная прокрутка
overflow-clipобрезать без создания области прокрутки
overscroll-contain, overscroll-noneне пробрасывать прокрутку наружу
scroll-smoothплавная прокрутка к якорям
snap-x, snap-centerприлипание при прокрутке (карусели)
scroll-mt-16отступ для якоря под липкой шапкой

Готовые сочетания

ЗадачаКлассы
Бейдж в углу иконкиродитель relative, бейдж absolute -top-1 -right-1
Затемнение на картинкеabsolute inset-0 bg-slate-900/40
Липкая шапка страницыsticky top-0 z-10 bg-white/95
Модальное окноfixed inset-0 z-50 flex items-center justify-center
Центрировать абсолютный блокabsolute inset-0 m-auto или flex items-center justify-center у родителя
Широкая таблицаoverflow-x-auto у обёртки