Липкое позиционирование

Последнее значение position — sticky. «Липкий» элемент — это смесь относительного и фиксированного. Сначала он ведёт себя как относительный: находится в нормальном потоке и прокручивается вместе со страницей. Но как только прокрутка унесла бы его за границу, заданную смещением, например top: 0, он прилипает к этому краю окна и остаётся там, как фиксированный элемент.

Однако липкий элемент никогда не выходит за пределы родителя. Он прилипает, только пока родитель виден на экране: когда конец родителя прокручивается мимо, липкий элемент уезжает вместе с ним. Попробуйте на этом блоке. У обоих заголовков в нём заданы position: sticky и top: 0, и каждый находится в своём разделе. Блок прокручивается сам по себе, поэтому заголовки прилипают к его верхнему краю, а не к верху окна:

Без смещения (top, bottom и так далее) липкий элемент вообще не прилипает.

Липкое позиционирование часто используют для навигации, которая остаётся вверху окна при прокрутке. В отличие от фиксированного, липкий элемент сохраняет своё место в нормальном потоке, поэтому в начале страницы он не закрывает содержимое под собой.

А когда элементы перекрываются, какой из них окажется сверху? Элементы с позиционированием, отличным от static, рисуются поверх статичных, а между собой — в том порядке, в каком они идут в HTML: более поздний закрывает более ранний. Это можно изменить свойством z-index, которое работает у элементов с позиционированием, отличным от static: элемент с большим z-index закрывает элемент с меньшим значением. Элементы без z-index ведут себя так, будто он равен 0.