Выбор ответа Middle Вёрстка на практике обновлено
Почему не работает position: sticky
Вопрос
Шапка с position: sticky; top: 0 уезжает вместе с контентом. Что из перечисленного объясняет проблему?
.layout { overflow: hidden; }
.header { position: sticky; top: 0; }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: У предка overflow: hidden: шапка липнет к нему, а он не прокручивается. Липкий элемент прилипает к ближайшему предку с прокруткой (overflow не visible).
Варианты ответа
- Не хватает
z-index: шапку перекрывает контент, и кажется, что она уехала stickyработает только у элементов сdisplay: inline, а шапка блочная- Нужно добавить самой шапке
position: relativeвместе соsticky - У предка
overflow: hidden: шапка липнет к нему, а он не прокручиваетсяправильный ответ
Разбор
Липкий элемент прилипает к ближайшему предку с прокруткой (overflow не visible). Предок с overflow: hidden становится таким контейнером, но сам не скроллится, и шапка уезжает вместе с ним. Решение: убрать overflow у предка или заменить на overflow: clip, которое не создаёт контейнер прокрутки. z-index влияет только на наложение. sticky работает с блочными элементами. position: relative перезаписал бы sticky.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.