Static, Relative and Absolute Positioning

Static Positioning (the Default)

Every element starts as position: static, meaning it sits in the normal document flow exactly where it naturally falls. Top, right, bottom and left properties have no effect on a statically positioned element.

Relative Positioning

position: relative keeps an element in the normal flow - it still takes up its original space - but allows it to be shifted visually using top, left, right or bottom, offset from where it would otherwise sit.

.badge {
  position: relative;
  top: -4px; /* nudged up slightly, space is still reserved below */
}

Absolute Positioning

position: absolute removes an element from the normal flow entirely - other elements act as if it is not there - and positions it relative to its nearest ancestor that has a position value other than static. If no such ancestor exists, it positions relative to the whole page.

.card {
  position: relative; /* becomes the reference point */
}
.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

The Key Rule to Remember

An absolutely positioned element always looks for the closest ancestor with position: relative, absolute, fixed or sticky. This is why .card { position: relative; } above matters - without it, the badge would position itself against the entire page instead of just the card.