Что происходит с расположением элементов, если второму элементу задать position absolute и left 50px, а остальные имеют position static в CSS
Что проверяют
Понимаете ли вы, что абсолютное позиционирование это выход из потока, и знаете ли, откуда отсчитываются смещения. Вопрос с виду про одно свойство, но по ответу видно, читаете ли вы макет как дерево содержащих блоков или подбираете значения наугад.
Как отвечать
Разберите две стороны, они независимы.
Что происходит с остальными: второй элемент выпадает из потока, и для соседей его как будто нет. Третий поднимается на место второго, высота родителя считается без него, отступы второго больше ни с чем не схлопываются.
Что происходит с ним самим: он ищет содержащий блок, то есть ближайшего предка с позиционированием, отличным от static. Если такого предка нет, содержащим блоком становится начальный блок страницы, и при прокрутке элемент уедет вместе с содержимым, в отличие от fixed. Дальше left: 50px отмеряет полсотни пикселей от левого края внутренней области содержащего блока.
Важная тонкость: задан только left, значит top остался auto, а это не ноль. По вертикали элемент остаётся примерно там, где оказался бы в потоке, то есть сразу под первым. Ещё он меняет способ расчёта ширины: вместо растягивания на всю строку блок ужимается по содержимому, если ширину не задать явно.
.wrapper { position: relative; }
.second { position: absolute; left: 50px; }И про порядок отрисовки: позиционированный элемент рисуется поверх обычных блоков, поэтому он способен накрыть текст соседа даже без z-index.
Где спотыкаются
Отвечают, что соседи останутся на своих местах. Соседи как раз сдвигаются: место второго элемента схлопывается, и следующий встаёт на его строку.
Считают точкой отсчёта непосредственного родителя. Если у родителя позиционирование по умолчанию, отсчёт уходит выше по дереву, вплоть до страницы. Обратная ловушка: transform или filter на далёком предке делает содержащим блоком его, и элемент внезапно прилипает не туда.
Забывают про ширину. Блок, занимавший всю строку, после absolute ужимается по содержимому, и вёрстка ломается не от смещения, а от того, что фон и границы стали другого размера.