positionプロパティとは？
指定した要素の配置方法を決めることができるプロパティです。
ボックスの配置方法を相対位置か絶対位置かを指定する際に使用します。
主に一緒に使われるのは、top / bottom / left / right などです。
positionの値について
振り返り用。
static
デフォルトの左上を基準値とします。この値のときには、top、bottom、left、rightは適用されません。
※positionを指定していない親ボックスは全てstaticになります。
覚え方 → 初期値！fixed
絶対位置への配置となり、ブラウザ表示領域（ウィンドウ）の左上を基準位置とします。
またスクロールしても位置が固定されたままとなります。
覚え方 → 動かざること山の如し！fixedの場所が〜〜？ \\\ぜった〜い///relative
相対位置への配置となります。staticを指定した場合と同じ基準位置になりますが、top、bottom、left、rightは適応されます。
覚え方 → 親クラスに設定するやつabsolute
こちらも絶対位置への配置となりますが、position:relativeが設定された最も近い親要素の左上を基準位置とします。
また、どの親要素にもrelativeが設定されていない場合は、ブラウザ表示領域（ウィンドウ）の左上を基準位置とします。
覚え方 → 生みの親と育ての親が違う場合もあるので注意すべきやつ
relativeとabsoluteの関係性
ここではpositionを理解する第一歩としてrelativeとabsoluteの関係性に絞って理解を深めていきたいと思います。
positionの値(relativeやabsolute)の指定をしているはつまり、
『topとleftが、10pxがいいって？おけ！じゃあ基準位置どこにすんの？』ってことだと認識しました。
とりあえず理解はできたけど、なんかパッとしませんね。
自分の腑に落とし込むために、もっと身近なもので抽象的に捉えてみましょう。
relativeとabsoluteの関係は、牧場と羊さんです！！！(あくまでも私のイメージ)
relative(牧場)を親要素で指定することによって、absolute(羊さん達)は牧場でのびのびと快適に過ごすことができます。
ただ、topやleftのサイズ指定や子要素の大きさによっては...
このように、羊さん脱走事件も起きてしまう可能性はあるので要注意。
※わざとデザイン的に上半身だけ脱走させたい時もあるので、一概に事件とは言えませんね！
補足
<body>
<div class="bokujo" style="position:relative">
<div class="hitsuzisan">
<div class="ushisan" style="position:absolute">
</div>
</div>
</div>
</body>
このように、class="bokujo"にposition:relativeが付いている場合、class="ushisan"の親要素は一つ上のclass="hitsuzisan"ではなく、class="bokujo"となります。
つまり、何を親とするかはposition:relativeが記述されているものに起因する（直近のとは言っていない）ということです。
最後に
様々なWEBサイトでは、このpositionにz-indexやoverflowが絡んでくることがよくあります。
コードも女も男も、一筋縄ではいかないということですね。
気になるサイトを見つけたらソースを確認して、htmlとcssを確認していくのも面白そうですね！