Как позиционируется элемент со свойством relative?

Элемент с `position: relative` позиционируется относительно своего исходного места в потоке: остаётся в потоке (место сохраняется), но может смещаться через `top`/`left`/`right`/`bottom`.

Как позиционируется relative

.el {
  position: relative;
  top: 10px;
  left: 20px;
}

• Элемент остаётся в потоке — место, которое он занимал, сохраняется (соседи не сдвигаются).
• Смещение (top/left) отсчитывается от его исходной позиции.
• top: 10px сдвигает вниз на 10px относительно того, где он был.

Отличие от absolute

• relative — относительно себя (исходной позиции), остаётся в потоке.
• absolute — относительно позиционированного предка, вынут из потока.

Relative как контекст для absolute

position: relative на родителе создаёт точку отсчёта для абсолютно позиционированных потомков:

.parent { position: relative; }         /* точка отсчёта */
.child { position: absolute; top: 0; right: 0; } /* относительно .parent */

Это самое частое применение relative — не для смещения себя, а как якорь для absolute-детей.

Нюансы

• Смещение relative не влияет на соседей (место сохранено, наложение возможно).
• Создаёт контекст наложения при z-index.

Коротко для собеседования

position: relative позиционирует элемент относительно его исходного места в потоке: элемент остаётся в потоке (место сохраняется, соседи не двигаются), смещается через top/left от своей исходной позиции. Главное применение — создать точку отсчёта (якорь) для абсолютно позиционированных потомков. Отличие от absolute (относительно предка, вне потока).