Що робить position: relative?

CSSJunior~1 хв читання

position: relative залишає елемент у звичайному потоці, але дозволяє зміщувати його відносно власного початкового положення за допомогою top, right, bottom, left.

Особливості:

елемент залишається на своєму місці в потоці, логічно не перекриває сусідів;
зміщення відбувається візуально, але простір під елемент залишається на старому місці;
елемент стає орієнтиром для абсолютного позиціонування вкладених position: absolute.

Приклад:

css

div {
  position: relative;
  top: 10px;   /* зсув вниз */
  left: 20px;  /* зсув вправо */
}

Підсумок: relative - це режим, при якому елемент залишається в потоці, але може бути зсунутий відносно свого початкового положення.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.