position
中級読み方：ポジション｜英語：Position
要素の配置方法を指定するプロパティで、static, relative, absolute, fixed, sticky があるよ。
やさしい説明
positionは、要素の配置方法を指定するプロパティです。デフォルトは static（通常の流れ）ですが、変更すると要素を自由に動かせます。
relative は元の位置を基準にずらします。absolute は親要素を基準に自由配置。fixed は画面に固定（スクロールしても動かない）。sticky はスクロールに追従して途中で固定されます。
absolute を使うときは、親要素に position: relative を指定するのがセットです。これを忘れると画面全体が基準になってしまいます。
図解：positionの種類
positionの値と使い分け
- static（デフォルト） — 通常のレイアウトに従う。top/left等は効かない
- relative — 元の位置を基準にずらす。他の要素への影響はなし。absoluteの基準点にするためだけに使うことも多い
- absolute — 直近の position 指定済み祖先を基準に自由配置。通常の流れから外れる
- fixed — ビューポート（画面）を基準に固定。スクロールしても動かない
- sticky — スクロールに追従しつつ、指定位置に達したら固定される
具体例・使い方
/* 固定ヘッダー（スクロールしても上に残る） */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
/* 親を基準にバッジを右上に配置 */
.card { position: relative; }
.badge { position: absolute; top: -8px; right: -8px; }
/* スクロール追従するサイドバー */
.sidebar { position: sticky; top: 80px; }いつ使う？
- 固定ヘッダー・フッター・フローティングボタン（
fixed） - カードの右上にバッジ・通知数を表示（
absolute） - モーダルの中央配置、ツールチップ（
absolute） - スクロール追従するサイドバー・目次（
sticky）
間違いやすいポイント
❌ absolute の親に relative を付け忘れる
親要素に position が指定されていないと、absolute の基準が body（画面全体）になります。意図しない場所に飛んでしまう原因です。absolute を使うときは必ず親に position: relative を付けましょう。
❌ fixed で要素が他のコンテンツに重なる
fixed は通常のレイアウトの流れから外れるので、下のコンテンツがヘッダーの下に潜り込んで隠れます。body に padding-top を追加して対処しましょう。
よくある疑問
Q: relativeとabsoluteの違いは？
A: relativeは元の位置を基準にずらす。absoluteは親要素（position指定あり）を基準に自由配置。absoluteは元の位置から外れます。
Q: fixedとstickyの違いは？
A: fixedは常に画面に固定。stickyはスクロールして特定位置に来たら固定される。ヘッダーの固定にはstickyが便利です。
Q: position: stickyが効かないときは？
A: ①top等のオフセット値を指定していない ②親要素にoverflow: hiddenがある ③親の高さがsticky要素と同じ、の3つが主な原因です。
関連用語
📖 関連レッスン
レッスンを見る →