Относительное позиционирование

Относительное позиционирование в CSS позволяет смещать элемент относительно его исходного положения в потоке документа, не нарушая расположение соседних элементов.

Свойство position

Чтобы применить относительное позиционирование, используется:

  • position: relative; — задаёт относительное позиционирование.

Смещение элементов

После применения position: relative; можно использовать свойства смещения:

  • top — смещение вниз.
  • bottom — смещение вверх.
  • left — смещение вправо.
  • right — смещение влево.

Пример

div.box {
  position: relative;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background: lightgreen;
}

В этом примере блок div.box будет смещён на 20px вниз и на 30px вправо относительно его исходного положения.

Особенности

  • Элемент остаётся в потоке документа, его пространство сохраняется.
  • Можно комбинировать с z-index для управления наложением.
  • Относительное позиционирование часто используется для небольших корректировок макета.