Какое знаешь позиционирование в CSS

В CSS есть несколько типов позиционирования:

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

Пример:

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

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}