Как работает свойство position: sticky при различных сценариях скроллинга?

Свойство position: sticky в CSS позволяет элементу «прилипать» к экрану при прокрутке, пока он не встретится с границей родительского блока. doka.guide

При вертикальном скролле работают только свойства top и bottom, при горизонтальном — left и right или их логические аналоги inset. doka.guide

Процесс работы свойства можно описать так: пока элемент не достиг указанного расстояния от края окна браузера, он ведёт себя как position: relative. doka.guide Когда элемент достигает этой точки, он начинает вести себя как position: fixed. doka.guide Когда элемент встречается с противоположным краем родителя, он снова ведёт себя как position: relative. doka.guide

Некоторые сценарии, в которых свойство position: sticky может не работать:

• Элемент занимает всю высоту родительского блока (один в блоке или просто самый высокий среди соседних элементов). doka.guide В таком случае position: sticky не сработает. doka.guide
• Элемент является единственным ребёнком своего родителя-обёртки. web-standards.ru Это связано с тем, что элемент с position: sticky может перемещаться только в пределах контейнера, в котором находится. web-standards.ru
• Есть вложенные скролл-контейнеры. habr.com В таком случае sticky-элемент приклеивается к ближайшему контейнеру. habr.com

Если в одном родительском элементе есть несколько sticky-элементов с одинаковым значением позиции, то они будут располагаться друг над другом в порядке их появления в HTML-разметке. blog.w00d1f.com