要素の配置を決めるpositionプロパティの基本

※随時内容アップデートします

positionプロパティとは？

特定の位置に要素を配置するプロパティのことです。
positionプロパティの値には大きく5種類あります。

index.css

position: static; 
position: absolute;
position: relative;
position: fixed;
position: sticky;

positionプロパティの種類

1、position: static;

ほぼ使いませんが、デフォルトの値です。要素は通常通りの位置に配置されます。
なのでposition: static;を記述した場合と、何も記述しない場合の挙動は変わりません。

2、position: absolute;

絶対的な配置を決めます。ビューポート（画面全体）左上が基準になります。

3、position: relative;

相対値を決めます。相対値とは、他の要素との関係で成り立つ値のことです。
親要素にposition: relative;を指定すると、小要素は親要素の左上を基準にポジションを取ります。

example.css

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 〇〇px;
    left: 〇〇px;
}

4、position: fixed;

指定した位置に要素を固定します。
fixedとは、通常の配置から浮かんでいる状態。
Webページは何層にも要素が重なっていて、z-indexプロパティと併用することで重なり位置を調整できます。数字が大きいほど前(上)に、小さいほど後ろ（下）に重なります。

どこで使うのか？

1、ヘッダーを最上部で固定
2、トップに戻るボタンを画面右下に固定
3、フッターを画面下部に固定
などです。ヘッダーに使う事が多いかもしれませんね！

5、position: sticky;

fixedと混同しやすいが、配置の基準が異なります。

fixed：ビューポート（画面全体）が基準となって固定される。
sticky：親要素の中で固定される。親要素から外に出ない。
スクロールによって規定の位置（たとえばtop: 0;）に達するとfixedのように挙動するので混同しやすい。

最後に

今回は以上です！最後までご覧いただきありがとうございました！