Что такое свойство position в CSS и как оно работает

Что проверяют

Понимаете ли вы, относительно чего на самом деле встаёт элемент и что происходит с потоком документа. Названия пяти значений знают все, поэтому следом почти всегда просят объяснить, почему sticky не прилипает или почему fixed вдруг поехал вместе с блоком.

Как отвечать

Пройдитесь по значениям и для каждого назовите точку отсчёта:

• static: значение по умолчанию. Элемент в обычном потоке, top, left и другие смещения на него не действуют;
• relative: место в потоке сохраняется, элемент только визуально сдвигается от исходной позиции, соседи этого не замечают. Главное применение: сделать блок точкой отсчёта для абсолютных потомков;
• absolute: элемент выпадает из потока, соседи занимают его место. Координаты считаются от ближайшего предка с position, отличным от static, а если такого нет, от начального содержащего блока, то есть прямоугольника размером с окно в начале документа;
• fixed: тоже вне потока, отсчёт от окна просмотра, при прокрутке стоит на месте;
• sticky: ведёт себя как relative, пока при прокрутке не дойдёт до порога из top (или bottom, left, right), потом прилипает. Работает внутри ближайшего прокручиваемого предка и не выходит за границы своего родителя.

Отдельно скажите про содержащий блок: transform, filter, perspective или contain: paint на предке делают его точкой отсчёта и для absolute, и для fixed. Добавьте, что z-index работает на позиционированных элементах и на элементах flex и grid, а fixed и sticky всегда создают свой контекст наложения.

Где спотыкаются

Не могут объяснить, почему sticky не работает. Частые причины: не задан порог top, у одного из предков стоит overflow: hidden или auto, либо родитель по высоте равен самому элементу, и прилипать просто некуда.

Считают, что fixed всегда привязан к окну. Анимация через transform на любом предке превращает его в подобие абсолютного блока внутри этого предка, и он начинает прокручиваться вместе с ним.

Лечат перекрытие, поднимая z-index до 9999. Если элементы лежат в разных контекстах наложения, число не поможет: сравниваются контексты родителей, а не значения внутри них.