Описание тега relative
Относительное позиционирование - это схема позиционирования, используемая в ряде языков программирования. Элемент с позицией: относительный сначала выкладывается как любой статический элемент; уровень блока или встроенный. Но затем происходит нечто интересное: сгенерированный прямоугольник смещается в соответствии с верхним, нижним, левым и правым свойствами.
Что следует помнить об относительном позиционировании, так это то, что смещается только сгенерированная коробка. Элемент все еще остается там, где он был в статическом потоке документов. Вот где он "занимает место", когда речь идет о других элементах. Это означает, что смещенный прямоугольник может в конечном итоге перекрывать блоки других элементов, поскольку они все еще действуют так, как если бы относительное положение элемента оставалось там, где оно должно быть, до применения позиционирования. Что касается потока документов, элемент не сместился - это только конечный визуальный результат, показывающий перемещение блока.