CSS

A setting that decides where an element is placed—whether it stays in the normal flow, shifts a little, sticks to the screen, or snaps in place while scrolling.

position

position の役割（まず結論）

positionプロパティは、要素を通常の流れのままにするか、少しずらすか、親や画面を基準に好きな場所へ置くか、スクロールで貼り付けるかを選ぶための設定です。

書き方（Syntax）

CSS

○○ {position: 値;}

指定できる値（5つ）

○○にはセレクタが入ります。値には次の５つのどれかを指定します。

static
初期値。通常の配置。top/right/bottom/left と z-index は無視されます。
relative
通常の位置から見た目だけ少し動かします（元のスペースは保持）。後続要素の配置には影響しません。子要素の absolute の基準（目印）としてもよく使います。
absolute
もっとも近い positioned 祖先（= position が static 以外の祖先）を基準に、上下左右の距離で配置します。該当祖先がなければ初期包含ブロックが基準になります（多くのケースでビューポート）。この要素は通常の流れから外れます。
fixed
ビューポート（画面の見えている範囲）を基準に固定し、スクロールしても動きません。通常の流れから外れます。
sticky
普段は relative と同様に流れに従いますが、指定した閾値（例：top: 0;）に達するとその位置に貼り付きます。top/left などのオフセット指定が必要です。

位置の微調整：top/right/bottom/left/inset

　position で決めるのは「配置方法（基準）」です。実際の表示位置は top / right / bottom / left（まとめて指定できる略記 inset）で調整します。

重なり順の基本（z-index）

重なり順は z-index で調整します（基本は position を static 以外にして使います）。思ったように前面に来ない場合は、対象（または親）に position: relative; を付けてから z-index を指定してみてください。

relative の基本例

　例えば、class名が "test" の要素の相対的な位置を指定したいときには、

CSS

.test {position: relative;}

という書き方をします。

よく使うパターン：親 relative × 子 absolute

Example: 親 relative × 子 absolute（右下にバッジ）

HTML

<div class="card">
	バナー
	<button class="badge">NEW</button>
</div>

CSS

.card {
	position: relative;
	width: 240px;
	height: 120px;
	background: #eee;
}
.badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
}

略記 inset の例

Example: inset（上下左右を一括指定）

CSS

.fill {
	position: absolute;
	inset: 0;
}

fixed の基本例

Example: 画面右下の固定ボタン

CSS

.floatBtn {
	position: fixed;
	right: 16px;
	bottom: 16px;
}

sticky の基本例

Example: sticky ヘッダー

CSS

.siteHead {position: sticky; top: 0;}

sticky が効かないとき

Tips : sticky が効かないときのチェック