В чем разница между значениями Position: Fixed, Absolute, Relative, Static

Ответ

position: relative смещает элемент относительно его исходного положения в потоке документа, но сохраняет занимаемое им место.

position: absolute вырывает элемент из потока и позиционирует относительно ближайшего родителя с position: relative/absolute/fixed. Если такого нет — относительно <html>.

position: fixed фиксирует элемент относительно viewport (окна браузера), игнорируя прокрутку.

Пример:

<div class="parent">
  <div class="child relative">Relative</div>
  <div class="child absolute">Absolute</div>
  <div class="child fixed">Fixed</div>
</div>

.parent { position: relative; }
.relative { position: relative; top: 20px; }
.absolute { position: absolute; top: 0; }
.fixed { position: fixed; bottom: 0; }

Ключевое:

relative — смещение без вырывания из потока.
absolute — позиционирование относительно родителя.
fixed — привязка к экрану.