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

При position: relative элемент позиционируется относительно своего обычного места в потоке документа.

Основные особенности:

• Элемент остается в потоке документа, занимая свое исходное место
• Можно смещать с помощью top, right, bottom, left
• Смещение не влияет на положение соседних элементов
• Создает новый контекст для абсолютно позиционированных потомков

Пример:

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

Элемент сместится на 20px вниз и 30px вправо от своего исходного положения, но пространство, которое он занимал, останется незанятым.