How does position: relative differ from position: absolute?

relative nudges an element from where it would normally sit while keeping its space reserved; absolute rips it out of the flow and positions it against an ancestor.

With position: relative, the element stays in the document flow — its original gap is held open, and offsets like top or left just shift it visually from that starting spot. With position: absolute, the element is removed from flow entirely and placed against its nearest positioned ancestor.

#child {
  position: relative;
  /* Move 5px UP from where it normally sits */
  bottom: 5px;
  /* Move 5px LEFT from where it normally sits */
  right: 5px;
}

The counter-intuitive bit: with relative positioning, bottom: 5px means "push 5px away from the bottom edge," i.e. upward. Each offset pushes the element away from the named side, not toward it.