Значения position
Вопрос
Расскажи про значения свойства position и когда каждое применяешь.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
`static` по умолчанию, inset-свойства и `z-index` (вне flex/grid) не работают
`relative` сдвигает визуально, место в потоке сохраняется; чаще служит точкой отсчёта для детей
`absolute` выпадает из потока, считается от ближайшего позиционированного предка
`fixed` считается от viewport и не уезжает при прокрутке
`sticky` в потоке, прилипает после порога в пределах родителя
Ловушка: `transform` у предка меняет точку отсчёта для `fixed`
Что могут спросить следом
- Почему шапка с
stickyможет не прилипать? - Как отцентрировать абсолютный элемент?
- Почему модалку лучше рендерить в конец
body?
Разбор
По умолчанию у всех static: элемент в обычном потоке, top и left на него не действуют. relative оставляет элемент в потоке, но позволяет сдвинуть его визуально; соседи этого не замечают. Чаще я ставлю relative родителю, чтобы он стал точкой отсчёта для абсолютных детей, например бейджа в углу карточки. absolute вынимает элемент из потока, родитель перестаёт учитывать его высоту, а координаты считаются от ближайшего позиционированного предка. fixed привязан к окну и не скроллится: тосты, плавающая кнопка чата. sticky гибрид: элемент в потоке, пока не дошёл до порога, потом прилипает, но только в пределах своего родителя; это шапки таблиц и заголовки секций. Важная ловушка: если у предка есть transform или filter, то и fixed-элемент начинает позиционироваться от него, поэтому модалки выношу в портал или использую <dialog>.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.