В чём разница между position: relative и position: absolute?

Разница в том, ОТНОСИТЕЛЬНО ЧЕГО двигается элемент при заданных top/left/right/bottom:

• relative — элемент остаётся на своём месте в потоке (соседи его «помнят»), а смещается ОТНОСИТЕЛЬНО САМОГО СЕБЯ. Место под ним сохраняется.
• absolute — элемент ВЫПАДАЕТ из потока (соседи ведут себя так, будто его нет) и позиционируется относительно ближайшего предка с position не static (relative/absolute/fixed). Если такого предка нет — относительно всей страницы (вот почему «прыгает в угол»).

Классический приём — родителю relative, ребёнку absolute:

.card { position: relative; }       /* точка отсчёта */
.badge {
  position: absolute;
  top: 8px;
  right: 8px;                        /* прижать в правый верхний угол КАРТОЧКИ */
}

То есть relative часто ставят не чтобы двигать сам элемент, а чтобы он стал «якорем» для absolute-детей.