Чем отличается position: absolute от position: relative?

Свойство position управляет тем, как элемент располагается на странице. Значения relative и absolute решают разные задачи и по-разному взаимодействуют с потоком документа.

position: relative

Элемент остаётся в нормальном потоке, но его можно сместить через top, left, right, bottom. Соседние элементы при этом не сдвигаются — место, которое занимал элемент, сохраняется.

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

Часто relative используют как «якорь» для абсолютно позиционированных детей.

position: absolute

Элемент полностью вырывается из потока: соседи ведут себя так, будто его нет. Координаты считаются от ближайшего предка с position, отличным от static. Если такого предка нет — от html.

.parent { position: relative; }
.child {
  position: absolute;
  top: 0;
  right: 0;
}

Так делают бейджи, тултипы, выпадающие меню, оверлеи.

Ключевые отличия

• relative сохраняет место в потоке, absolute — нет.
• relative смещает от собственной позиции, absolute — от родителя-якоря.
• absolute часто требует родителя с relative.

Итог: relative применяйте для лёгких сдвигов и как контейнер-якорь, absolute — когда элемент должен «выпасть» из потока и привязаться к конкретному родителю.