Выпадает ли элемент из потока при position relative в CSS

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

Знаете ли вы, какие значения position убирают элемент из потока, а какие нет, и что именно сдвигается при top и left. Следом обычно просят сравнить с absolute и объяснить, зачем родителю ставят position: relative.

Как отвечать

Короткий ответ: нет, не выпадает. Элемент с position: relative раскладывается в потоке так же, как static, и его место сохраняется. Смещения top, right, bottom, left (или inset) сдвигают только отрисовку относительно исходной позиции. Соседи не двигаются и не подстраиваются, а сдвинутый блок может их перекрыть.

Дальше покажите, что знаете остальную картину:

• absolute и fixed: выпадают из потока, место не резервируется. absolute отсчитывается от ближайшего позиционированного предка, fixed от окна просмотра, если у предков нет transform, filter и подобных свойств;
• sticky: остаётся в потоке и ведёт себя как relative, пока при прокрутке не дойдёт до порога, после чего прилипает в пределах своего контейнера;
• float: тоже выводит элемент из обычного потока, но текст и строчные элементы его обтекают.

Практические следствия relative:

• контейнер для absolute: самое частое применение. Родитель с relative задаёт систему координат для абсолютных детей, сам никуда не сдвигаясь;
• z-index: начинает работать, а при значении, отличном от auto, элемент создаёт собственный контекст наложения;
• конфликт смещений: если заданы и top, и bottom, побеждает top; из left и right при направлении слева направо побеждает left.

Похожий визуальный эффект даёт transform: translate(): он тоже не влияет на раскладку и лучше анимируется.

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

Путают с absolute и говорят, что relative «вытаскивает» элемент. Проверка простая: после top: 20px соседние блоки остаются на месте, а на исходном месте элемента остаётся пустота.

Забывают, что сдвинутый элемент перекрывает соседей, и потом ищут, почему не нажимается ссылка под ним.

Удивляются, что не работает z-index: у элемента нет позиционирования и он не flex- или grid-элемент, либо он заперт внутри контекста наложения родителя.