CSSのpositionとは
positionとは要素の位置を決めるためのプロパティです。
どんな使い方ができるのか
要素を指定したぶんだけ動かしたり、要素の上に別の要素を重ねてのせることができたり（画像の上に要素をのせるイメージ）、常に画面の同じ位置に要素を固定したりできます。
positionの書き方
positionプロパティはCSSで以下のように書きます。
セレクタ名 { position : 値 }
値には次の４つのどれかを指定します。
positionの値
static : 初期値。指定することはほとんどない
relative : 現在の位置を基準に相対的な位置を決める
absolute : 親要素を基準に絶対的な位置を決める
fixed : 画面の決まった位置に固定する
positionは基本的にtop、bottom、left、rightというプロパティとセットで使います。
位置を指定する流れ
①positionで基準を決める。
②top bottom left rightで具体的な位置を数字で調整
staticとは？
初期値 : CSSで何も指定していなければこれになっている
要素は通常の位置に : 上下左右に動かすことができない
要素の位置を調整できない : topやleftなどを指定しても効果がない
z-indexを指定できない : 要素の重なり順を変えられない
基本的にstaticを指定することはない。
position: relative
position: relativeは現在の表示位置から相対的に要素の位置を動かした糸気に使います。
position: relativeとしても、topやbottomを指定しなければstaticと同じ位置に表示されます。
そのため一見同じように感じられるが、①位置調整の可否や②z-index指定の可否という違いがあります。「z-indexやtopなどが指定できないときはrelativeにする！」とおぼえておくと良いでしょう。
position:absolute
absoluteだと親要素を基準に、絶対的な位置を指定することになります。この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味します。
親要素はrelativeにしておく
absoluteを使って位置調整するときは、親要素にposition: relative（もしくはfixed）を指定しましょう。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、親要素もセットで変えるようにしましょう。
position: fixed
これは、画面の決まった位置に要素を固定させたい時に使う。スクロールしても位置が変わらないメニューバーなどを表示させたい時に使うと便利。
absoluteと指定方法がほとんど同じですが、位置の基準は親要素ではなく「ウィンドウ全体」です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。