В чем разница между значениями свойства position

position определяет метод позиционирования элемента. Основные значения:

1. static (по умолчанию) — элемент располагается в нормальном потоке документа.
2. relative — элемент смещается относительно своего обычного положения, но место в потоке сохраняется.
3. absolute — элемент вырывается из потока и позиционируется относительно ближайшего позиционированного родителя (не static).
4. fixed — аналогично absolute, но относительно viewport (не зависит от прокрутки).
5. sticky — гибрид relative и fixed. Пока элемент в viewport — ведёт себя как relative, при прокрутке за границу — "прилипает" как fixed.

Пример:

.box {
  position: relative;
  top: 20px; /* Сдвиг от исходной позиции */
}

.modal {
  position: fixed;
  top: 0; /* Прилипнет к верху экрана */
}