CSS: CSSポジショニング
最終更新：2026-10-13
CSSのポジショニングは強力なレイアウトツールで、ページ上の要素の配置を細かく制御できます。
positionプロパティ早見表
| 値 | 動作 | 基準点 | よく使うケース |
|---|---|---|---|
static |
通常フロー（デフォルト） | — | デフォルトの動作 |
relative |
通常位置からのオフセット | 自身の元の位置 | 微調整、配置コンテキスト |
absolute |
フローから除外 | 最近の配置された祖先 | バッジ、オーバーレイ |
fixed |
ビューポートに固定 | ビューポート | 固定ヘッダー、トップに戻る |
sticky |
ハイブリッド | スクロールコンテナ + ビューポート | 固定ヘッダー |
1. position: relative
通常位置からのオフセットで、ドキュメントフローから除外されません：
▶ サンプル
▶ 試してみようよく使うケース：
- 要素の位置の微調整
- absoluteの子要素の配置コンテキストの作成
2. position: absolute
フローから除外され、最近の配置された祖先に対して相対的に配置：
▶ サンプル
▶ 試してみよう重要： 配置された祖先が存在しない場合、absoluteはビューポートに対して相対的に配置されます。
3. position: fixed
ビューポートに固定され、ページと一緒にスクロールしません：
▶ サンプル
▶ 試してみようよく使うケース：
- ナビゲーションバー
- トップに戻るボタン
- チャットウィジェット
4. position: sticky
relativeとfixedのハイブリッド——通常はスクロールし、しきい値で「固定」されます：
▶ サンプル
▶ 試してみよう使用上の注意：
- 動作するには
top、bottom、left、またはrightの値が必要 - 親要素に
overflow: hiddenまたはoverflow: autoを設定できない - 親の高さはスティッキー要素の高さより大きくなければならない
5. z-index（重なり順）
要素が重なる場合、z-indexがどちらが上に表示されるかを制御：
▶ サンプル
▶ 試してみよう注意： z-indexは配置された要素（static以外）でのみ機能します。
(1) スタッキングコンテキスト
z-indexは同じ「スタッキングコンテキスト」内で比較されます。各配置された要素はスタッキングコンテキストを作成し、子のz-indexは親のコンテキスト内でのみ比較されます。
❓ よくある質問
Q position: relativeはいつ使いますか？
A 最も一般的には、absoluteの子要素の配置基準として使用されます。親に
position: relativeを追加すると（オフセットなし）、position: absoluteの子要素はその親に対して相対的に配置されます。親にrelativeがない場合、absoluteはページ全体に対して相対的に配置されます。Q fixedポジショニングはモバイルでうまく機能しませんか？
A fixedはモバイルSafariで一貫性のない動作をします。特にキーボードのポップアップやページスクロール時に顕著です。一部のシナリオでは
position: stickyを代替として使用するか、JavaScriptでモバイルを検出して特別に処理します。Q z-indexを高く設定してもまだブロックされますか？
A z-indexは同じスタッキングコンテキスト内でのみ機能します。親にz-indexがある場合、子のz-indexはその親のコンテキスト内でのみ比較されます——親の境界を越えることはありません。親のz-indexが低いか、
opacityなど新しいスタッキングコンテキストを作成するプロパティがないか確認してください。📖 まとめ
- CSSのポジショニングは強力なレイアウトツールです
relativeは微調整と配置コンテキスト用absoluteは親の中で子を正確に配置fixedはビューポート固定要素（ナビゲーション、トップに戻る）用stickyは「位置で固定」シナリオ用z-indexスタッキングと組み合わせて、あらゆるレイアウトニーズに対応
📝 練習問題
position: absoluteを使用して、右上隅に「HOT」バッジを持つ「商品カード」を作成してください。position: fixedを使用して、固定の下部ナビゲーションバーまたは著作権表示を作成してください。- 「スティッキー見出し」を作成してください——スクロール時に次のタイトルが押し出すまで上部に固定されるセクションタイトル。
- 子要素の絶対中央揃えを実装してください（absolute + top/left + transformを使用）。
