Выбор ответа Middle Позиционирование и z-index спрашивают часто обновлено
Почему не работает sticky
Вопрос
Шапке задали position: sticky; top: 0, но при прокрутке страницы она уезжает. Какая причина самая частая?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: У одного из предков стоит overflow: hidden или auto. Липкий элемент прилипает к ближайшему предку, который создаёт область прокрутки. overflow: hidden или auto у обёртки делает её такой областью, и раз прокручивается окно, а не обёртка, эффекта нет. sticky давно работает во всех основных…
Варианты ответа
- У одного из предков стоит
overflow: hiddenилиautoправильный ответ stickyне поддерживается в Safari без префикса-webkit-- Не задан
z-index, и шапку перекрывает прокручиваемый контент - Шапка лежит в
<header>, а sticky работает только для<div>
Разбор
Липкий элемент прилипает к ближайшему предку, который создаёт область прокрутки. overflow: hidden или auto у обёртки делает её такой областью, и раз прокручивается окно, а не обёртка, эффекта нет. sticky давно работает во всех основных браузерах. z-index влияет на перекрытие, а не на прилипание. Тег не важен.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.