Вёрстка Middle Вёрстка на практике обновлено
Липкая шапка
Условие
.header прилипает к верху области прокрутки .scroller и остаётся видимым. Шапка должна быть поверх содержимого.
Что проверяют тесты
позиционирование sticky
задано смещение сверху
поверх содержимого
непрозрачный фон
остаётся на месте при прокрутке
Как подойти
Три условия, без любого из которых sticky «не работает»: указано смещение (top), у предка нет overflow: hidden, и сам элемент не вынесен из потока. Плюс две практические детали - непрозрачный фон и z-index, без которых шапка визуально ломается, хотя формально прилипает.
Подсказки: 3
- position: sticky без указания смещения ведёт себя как static.
- Прилипание работает относительно ближайшего предка с прокруткой.
- Прозрачный фон покажет проезжающий под шапкой текст.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.