positionプロパティ（absoluteとrelative）

positionプロパティ

「要素を配置する基準」を指定するためのプロパティです。
通常、HTMLでは要素同士が重なって表示することはありませんが、CSSを用いてpositionプロパティを利用することで、要素の位置をずらし重ねることができます。

absolute（絶対位置）

移動するときの基準がウィンドウ、または親要素になる
複数の要素がある場合でも「absolute」で指定すると、他の要素を無視してサイト全体の左上部分を基準として（top:0、left:0の位置）移動する

sample2にposition:absolute;を適用し top:100px; left:200px;の位置に設定すると以下の様になる

sample1を無視してサイトの左上から高さ100px横に200px移動した場所にsample2が配置される

relative（相対位置）

relativeは本来その要素が配置される場所が基準になります。

#sample2{position:relative; top:100px; left:200px;}
本来であればsample1の左下からsample2が表示されるはずですが、sample2にposition:relativeを適用させることで、本来の基準点から100px下、200px右に移動して表示されます。

基準位置の変更

position:abusoluteにおいて基準位置はサイトの左上部分になりますが、この基準位置を変更することができます。
基準としたい要素にposition:relative;を指定すると、その要素の左上部分が基準位置となります。

sample2が親要素でsample3が子要素です。
sample2の左上を基準に下に200px、右に200px移動した地点からsample3が配置されています。