Что такое позиционирование

Позиционирование в CSS определяет, как элемент располагается на странице. Основные виды:

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

Пример:

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