relative
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が static であった時と同じです。
absolute
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。
position - CSS: カスケーディングスタイルシート | MDN
つまり、大まかに言うと、
relative
は通常のフローの位置を基準にし、absolute
は「包含ブロック」の位置を基準にする。
relative
は他のブロックのレイアウトに影響を与えず、absolute
は他のブロックからないものとされるのでレイアウトに影響を与える。
というところが違います。
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
Layout and the containing block - CSS: Cascading Style Sheets | MDN
つまり、先ほどの「包含ブロック」にするために親要素をrelative
にしている、ということです。