More than 3 years have passed since last update.

CSS postion absolute / relative

Posted at 2020-12-01

##positionプロパティ
positon = 要素を配置する基準を指定するプロパティ
基準の場所を区別する為に、absolute(絶対位置)とrelative(相対位置)がある。

##absolute(絶対位置)
移動するときの基準がウィンドウ、もしくは親要素になる。
absoluteで指定した場合、他の要素を無視して左上（top:0、left:0の位置）が基準になる。

.クラス名 or #id名 {
    position: absolute;     
}

##relative(相対位置)
移動するときの基準が元々いた位置(positionを記述する前に配置されていた場所)になる。
親要素にrelativeを指定することで、親要素の位置を基準に子要素を移動させることもできます。

.クラス名 or #id名 {
    position: relative;     
}

参考元はこちら
こちらのサイトにて画像でわかりやすく説明されていますので是非ご覧ください。
（https://uxmilk.jp/63409）