Какой знаешь position для позиционирования относительно Viewport

position: fixed и position: sticky позиционируют элементы относительно viewport.

• fixed: элемент фиксируется относительно viewport, не зависит от скролла.

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

• sticky: элемент ведёт себя как relative, пока не достигает заданного offset, затем становится fixed.

.navbar {
  position: sticky;
  top: 20px;
}

Разница:

• fixed сразу привязывается к viewport.
• sticky "прилипает" только после скролла до определённой точки.

⚠️ fixed и sticky могут иметь проблемы с transform у родителя.