Выбор ответа Junior Позиционирование и z-index обновлено
Растянуть оверлей на весь блок
Вопрос
Нужно наложить полупрозрачный слой ровно поверх карточки. Какой вариант это сделает?
.card { position: relative; }
.overlay { /* ? */ }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: .overlay { position: absolute; inset: 0; }. absolute вынимает слой из потока и считает координаты от карточки, а inset: 0 (то есть top/right/bottom/left: 0) растягивает его на весь её padding-box. relative с размерами 100% останется в потоке и встанет под содержимым, а не поверх.…
Варианты ответа
.overlay { position: relative; width: 100%; height: 100%; }.overlay { position: fixed; inset: 0; }.overlay { position: absolute; inset: 0; }правильный ответ.overlay { position: sticky; top: 0; height: 100%; }
Разбор
absolute вынимает слой из потока и считает координаты от карточки, а inset: 0 (то есть top/right/bottom/left: 0) растягивает его на весь её padding-box. relative с размерами 100% останется в потоке и встанет под содержимым, а не поверх. fixed накроет весь экран. sticky остаётся в потоке и не накладывается на содержимое.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.