В чем разница между значениями `absolute` и `relative` для CSS-свойства `position`?

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

position: relative;

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

position: absolute;

• Элемент извлекается из нормального потока. Его исходное место занимают другие элементы.
• Он позиционируется относительно ближайшего предка с position, отличного от static (чаще всего relative). Если такого нет — относительно окна браузера (viewport).
• Свойства top, right, bottom, left задают отступы от границ этого контейнера-предка.

Практический пример:

<div class="container">
  <div class="box relative">Relative Box</div>
  <div class="box absolute">Absolute Box</div>
  <div class="box static">Static Box (следующий в потоке)</div>
</div>

.container {
  position: relative; /* Контекст позиционирования для .absolute */
  border: 2px solid blue;
  padding: 20px;
}

.box {
  height: 50px;
  border: 2px solid black;
  margin: 5px;
}

.relative {
  position: relative;
  top: 10px;  /* Сдвинется вниз, но его место останется пустым */
  left: 20px; /* Сдвинется вправо */
  background: lightgreen;
}

.absolute {
  position: absolute;
  top: 10px;  /* Прилипнет к верху .container */
  right: 10px; /* Прилипнет к правому краю .container */
  background: lightcoral;
  width: 150px;
}

.static {
  /* position: static (по умолчанию) */
  background: lightblue;
}

В этом примере:

1. Зеленый (relative) блок сдвинут, но синий блок (static) начинается там, где relative был изначально.
2. Красный (absolute) блок "висит" в правом верхнем углу синего контейнера, а синий блок поднялся на его место.