配置: relative、absolute、fixed、sticky、z-index

CSSの配置と適切に管理されたz-indexのスケールを使って、バッジ、ヘッダー、モーダルを思いどおりの位置にぴったり固定しましょう。

8 分 · 3 問

デフォルトでは、すべての要素は position: static で、ドキュメントのフローに従います。position: relative には2つの用途があります。周囲の要素を乱さずに要素を少しだけずらすこと、そして何より position: absolute を持つ子要素の基準となることです。最もよく使われる配置パターンです。プロモーションバッジ、ツールチップ、親の角に固定されたアイコンなどです。

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed はスクロールに関係なく要素をビューポートに固定します。クッキーバナーやトップへ戻るボタンなどです。position: sticky はハイブリッドです。要素はページとともに通常どおりスクロールし、あなたが定義したしきい値に達すると所定の位置に固定されます(たとえば top: 0)。表示され続けるヘッダーのための現代的な解決策です。

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

要素が重なると、z-index がどれが上に来るかを決めます。ただし配置された要素に限ります。ランダムな値ではなく、文書化されたスケールを採用しましょう。ドロップダウンメニューには10、ヘッダーには100、モーダルには1000といった具合です。注意: 独自の重ね合わせコンテキストを作る親(たとえば1未満の opacity を持つもの)は、そのすべての子要素の z-index に上限をかけます。

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. position: absolute な要素は何を基準に配置されますか?
   • 常にブラウザのウィンドウを基準にする
   • 最も近い配置された祖先、なければビューポートを基準にする
   • position が何であれ直接の親を基準にする
2. fixed と sticky の違いは何ですか?
   • fixed は常に画面に固定されたまま、sticky はスクロールのしきい値に達したときからのみ所定の位置に固定される
   • sticky は fixed より速く描画される
   • 違いはない。同義語である
3. なぜ z-index: 999 が効果を持たないことがあるのですか?
   • 許される最大値が100だから
   • 要素が配置されていないか、より低い重ね合わせコンテキストに閉じ込められているから
   • z-index は Grid でしか機能しないから