Как поведет себя элемент с параметрами Position: Relative, Top: 5px

Элемент с position: relative и top: 5px сместится на 5 пикселей вниз от своего исходного положения в потоке документа, но при этом сохранит занимаемое им место в разметке. Остальные элементы не перестроятся, как если бы он остался на месте.

Пример:

.box {
  position: relative;
  top: 5px;
  background: lightblue;
  width: 100px;
  height: 100px;
}

Важно:

• Смещение происходит относительно исходной позиции элемента
• Не влияет на соседние элементы (остается "дыра" на старом месте)
• Работает в сочетании с left, right, bottom
• Не выводит элемент из потока (в отличие от absolute или fixed)