Как работают позиционирования static, relative, absolute и fixed в CSS

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

Понимаете ли вы, относительно чего позиционируется элемент в каждом случае, и знаете ли про контекст наложения.

Как отвечать

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

Тонкости, на которых ловят:

• fixed перестаёт быть привязанным к окну, если у предка есть transform, filter, perspective, will-change или contain: такой предок создаёт новый содержащий блок. Классическая причина «почему модальное окно уехало»;
• sticky не работает, если у родителя overflow: hidden или не задан размер, в котором элементу есть куда прилипать;
• z-index действует только на позиционированные элементы и работает внутри контекста наложения: элемент не может перекрыть соседа своего родителя, каким бы большим ни было число.

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

Ставят absolute без позиционированного предка и получают привязку к странице.

Наращивают z-index вместо разбора контекста наложения.

Не понимают, почему fixed ведёт себя как absolute внутри блока с transform.

Ждут от sticky работы без указания порога (top).