要素を親の中で重ねるなら「親にrelative、子にabsolute」が基本です。画面へ固定するfixed、スクロール途中から固定するstickyは便利ですが、本文やフォーカス対象を隠さないよう実機で確認します。
情報確認日：2026年7月27日
結論：まず押さえるポイント
この記事の結論
- absoluteの基準はpositionがstatic以外の最も近い祖先
- fixedはビューポート基準、stickyはスクロール領域内
- z-indexは同じスタッキングコンテキスト内で比較される
- 通常レイアウトはGridやFlexboxを優先する
CSS positionの使い方の基本
staticは通常配置です。relativeは元の場所を保ちながら位置調整でき、absolute要素の基準も作れます。absoluteは通常フローから外れます。fixedは画面、stickyは指定したスクロール境界に追従します。
最小の実装例
HTML
<article class="card">
<span class="card-badge">NEW</span>
<h2>新しい記事</h2>
<p>カードの右上にバッジを置きます。</p>
</article>CSS
.card {
position: relative;
padding: 2rem 1.5rem 1.5rem;
}
.card-badge {
position: absolute;
inset-block-start: 0.75rem;
inset-inline-end: 0.75rem;
}top・rightではなく論理プロパティのinset-block-start・inset-inline-endを使うと、書字方向の変更にも対応しやすくなります。
実務で使うときの考え方
sticky見出し
.toc { position: sticky; top: 1rem; align-self: start; }stickyは親のoverflowや高さ、スクロール領域の影響を受けます。固定ヘッダーがある場合はtopにその高さを含めます。
fixedの閉じるボタン
モーダルをfixedで重ねる場合は、見た目だけでなくフォーカストラップ、Escapeで閉じる処理、背景のスクロール抑制、閉じた後のフォーカス復帰が必要です。
z-indexとスタッキングコンテキスト
z-index: 9999でも、親が別のスタッキングコンテキストの下にあれば前へ出ません。positionとz-indexだけでなく、transform、opacity、filter、isolationなどを祖先まで確認します。z-indexは層の用途ごとにトークン化しておくと、値が際限なく増えるのを防げます。
よくある失敗と直し方
absoluteがページ全体の左上へ移動する
基準にしたい親へposition:relativeがあるか確認します。
stickyが効かない
topなどのしきい値、親のoverflow、スクロール領域の有無、親が要素より十分高いかを確認します。
z-indexを増やしても前に出ない
祖先が作るスタッキングコンテキストをDevToolsで確認します。
WordPressで使う場合
WordPressの管理バーはログイン中だけ上部に表示されます。fixed・stickyヘッダーを使うテーマでは、管理バー、アンカーリンク、スマートフォンのセーフエリアを確認します。プラグインのモーダルとのz-index競合にも注意します。
よくある質問
absolute要素の分だけ親の高さは増えますか？
増えません。通常フローから外れるため、親のpaddingなどで必要な空間を確保します。
fixedとstickyはどちらを使いますか？
常に画面へ固定するならfixed、元の場所からスクロールして範囲内だけ追従させるならstickyです。
位置調整にtransformを使ってよいですか？
中央揃えやアニメーションに使えますが、新しいスタッキングコンテキストやfixedの基準へ影響する場合があります。
まとめ
positionは重なりや追従が必要な要素へ限定し、通常のレイアウトはGridやFlexboxを使います。absoluteの基準、stickyのスクロール親、z-indexのスタッキングコンテキストを順に確認してください。