«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.
Это свойство часто используется при создании "липкого" меню или "плавающего" сайтбара.
«Липкий» элемент — это элемент, которому мы задали position: sticky. Элемент будет становиться плавающим, как только область видимости достигнет определённой позиции, например top: 0px.
Пример:
.component { position: sticky; top: 0px;}«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.
Когда вы задаёте элементу
position: sticky, его родитель автоматически становится «липким» контейнером!Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.
Пример по ссылке ниже 👇👇👇