В чем разница между position fixed и position sticky в CSS
Что проверяют
Знаете ли вы, относительно чего позиционируется каждый элемент и остаётся ли он в потоке документа. Следом обычно спрашивают, почему sticky «не липнет», и тут проверяется, помните ли вы про прокручиваемого предка и overflow.
Как отвечать
position: fixed: элемент вынимается из потока, место под него не резервируется. Координаты считаются от вьюпорта, при прокрутке элемент стоит на месте. Исключение: если у предка заданtransform,filter,perspective,contain: paintилиwill-change: transform, fixed позиционируется относительно этого предка и прокручивается вместе с ним;position: sticky: элемент остаётся в потоке и ведёт себя какrelative, пока при прокрутке не дойдёт до порога изtop,bottom,leftилиright. Дальше он прилипает к краю ближайшего прокручиваемого предка, но не выходит за пределы своего родителя: когда родитель уезжает, уезжает и элемент;- общее: оба значения создают новый контекст наложения, поэтому
z-indexу них работает всегда и может спорить с соседями.
Типичные задачи: fixed для кнопки чата, cookie-баннера, модального оверлея; sticky для шапки таблицы, заголовков секций в длинном списке, боковой панели, которая едет до конца статьи. Для липкой шапки страницы sticky часто удобнее fixed: не нужен padding-top у body, чтобы контент не уезжал под шапку.
Хорошо дополнить мобильной спецификой: на iOS fixed-элементы у нижнего края ведут себя непредсказуемо при открытой клавиатуре и прыгающей адресной строке, а высоту полноэкранных слоёв надёжнее задавать через dvh, чем через vh.
Где спотыкаются
Забывают порог. Без top: 0 или другого смещения sticky ничем не отличается от relative, и кандидат ищет баг не там.
Не знают, что overflow: hidden или overflow: auto у любого предка делает его прокручиваемым контейнером. Элемент начинает липнуть к нему, а не к окну, и визуально «ломается».
Считают, что sticky работает относительно окна без ограничений. Он заперт внутри родителя: если родитель по высоте равен самому элементу, прилипать некуда.