Липкое позиционирование
Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы. Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности. В демонстрации ниже при прокрутке веб-страницы вниз синий блок с навигацией доходит до верхнего края окна и «приклеивается» к нему, фиксируясь на одном месте.
В данной демонстрации липкое позиционирование осуществляется с помощью значения sticky свойства position. При этом с помощью свойства top мы указываем точку, по достижении которой при прокрутке элемент превращается в фиксированный (пример 1).
Пример 1. Использование sticky
Следует понимать, что при вертикальной прокрутке для элемента имеет смысл указывать только top и bottom. При горизонтальной прокрутке будут работать только свойства left и right. Также имеет значение, чтобы высота или ширина родительского контейнера была больше размера элемента. В противном случае не будет полосы прокрутки и элемент останется на своём месте. Если в примере 1 элемент <nav> поместить внутрь <div>, то прилипание перестанет работать.
Прилипание элемента можно делать внутри блока с overflow, у которого значение задано как scroll или auto (пример 2).
Пример 2. Использование sticky и overflow
Значение sticky является относительно новым и не все браузеры его поддерживают, в частности, Internet Explorer.
См. также
- overflow
- position
- position в CSS
- relative и absolute
- Абсолютное позиционирование
- Высота и ширина в CSS
- Использование в вёрстке
- Несколько псевдоэлементов
- Нормальное позиционирование
- Относительное позиционирование
- Очистка float
- Подробнее о позиционировании
- Поток
- Свойства позиционирования
- Фиксированное позиционирование
Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа меню прилипало к верхнему краю браузера.
Рис. 1
Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа блок с картинками социальных сетей прилипал к верхнему краю браузера.
Рис. 1