CSSを勉強して、最初につまずくのが「position」の扱い方ではないでしょうか？私はそうでした。 「position」についての説明は大体以下のようになります。
static →　初期値
relative →　相対位置への配置・高さを持つ
absolute; →　絶対位置への配置・高さを持たない
fixed →　固定される
「position」についての詳細な説明は　position | MDN web docs　にありますのでご参考までに。
私は「position」の説明をいろいろ読んだり図で示されたりしても、やはりrelativeとabsoluteの相対位置・絶対位置がよくわかりませんでした。 そこで、実務の中で教えてもらった以下の説明でしっくりきました。 「relativeがかかっている親要素を基準にしている」
positionが指定されていない要素は最初staticですが、position:absolute;をかけた子要素の基準は、position:relative; がかかった親要素であるということです。 つまり、positionを使うときには、★親要素にposition : relative ; をつけることが必須になります。 また、必ずtop(bottom)/left(right)を指定することも忘れないようにしましょう。