ポジショニングとz-index

docs.scrimba.com

商品写真の右上隅に小さな「セール」バッジを配置したい。ページをスクロールするとその下を通る固定ヘッダーが欲しい。ページ上の他のすべてのものの上に浮かぶダイアログが必要だ。通常の CSS のスペーシングではこれらのいずれもできません。なぜなら、それは要素を次々と一列に配置するだけだからです。ポジショニングは、要素が通常の配置から抜け出し、指示した場所に正確に配置できるツールのセットです。他のものの上にも配置できます。

position プロパティ

すべての要素は**静的ポジショニング**で始まります。これは「ページの流れ内の通常の場所に座る」という単純な言い方です。これがデフォルトであり、ほとんどの場合、これが必要なものです。ポジショニングは、要素をその通常の場所から移動させたい場合に重要になります。

次のステップは position: relative です。これは4つのオフセットプロパティ top、right、bottom、left を使用して、要素を通常の場所から移動させます。重要なのは、要素が元のスペースを保持することです。他に何も隙間を埋めるために移動しません。

.badge {
  position: relative;
  top: 10px;                 /* 通常の場所から下に10px押される */
  left: 20px;                /* 通常の場所から右に20px押される */
}

これらの top と left オフセットは、static 要素ではまったく機能しません。static 以外の position を要素に指定してから機能し始めます。

ページ上のすべてが position: static で始まり、display とドキュメントフローで出会った通常の上から下への流れにあります。静的要素はオフセットプロパティを完全に無視するため、top または left を設定しても何も起こりません。これは人々をつまずかせます。彼らは top: 20px を追加し、変化がないことを確認し、実際の問題が欠落した position であるときに値が間違っていると仮定します。

穏やかなオプションは**相対ポジショニング**です。これは通常の場所から指定したオフセットだけ要素をシフトさせ、元のスペースを流れ内に保持したままにします。隣り合う要素は隙間を埋めるために移動しないため、相対位置指定された要素は隣に座っているものと重なる可能性があります。

.tooltip {
  position: relative;
  top: -4px;                 /* 座るはずの場所から上に4px持ち上げられる */
  left: 8px;                 /* 右に8px押される */
  /* 予約されたスペースは所定の位置に留まります。ペイントのみが移動します */
}

top や left などのオフセットは、要素が位置指定されていないと適用されません。 単独では、relative は小さな微調整ツールです。その最も重要な役割は、絶対位置指定された子のための参照ポイントを設定することです。これは次のセクションです。

position プロパティは5つの値を持ち、全体的なモデルは1つの質問で分割するとより簡単に理解できます。要素は通常のフローでスペースを占めるのでしょうか？static（初期値）と**relative** はどちらも占めます。absolute と fixed は占めません。sticky は2つの動作の間でスクロール時に切り替わるハイブリッドです。

relative は static からの最も穏やかな逸脱です。要素は静的な場合とまったく同じように通常フロー内にレイアウトされ、そのスペースはその元の位置に予約されてから、top / right / bottom / left によってその位置から視覚的にオフセットされます。予約されたスペースが移動しないため、相対要素をオフセットすると、レイアウトが考える場所ではなく、ペイント位置のみが変わるため、隣接するコンテンツと重なる可能性があり、何も押し回しません。

.list-item {
  position: relative;
  top: 6px;                  /* ペイントは6px下に；流れのスロットは所定の位置に残る */
}

2つの精度の問題があります。まず、オフセットは祖先に対してではなく、要素の独自の通常の位置に対して解決されます。top: 10px は「コンテナの上から10px」ではなく「そうでなければいる場所から10px下」を意味します。次に、相対要素に対立するオフセット（top と bottom、または left と right）を設定する場合、左から右、上から下の書きモードで開始側が勝つため、top は bottom をオーバーライドし、left は right をオーバーライドします。relative に到達する遥かに一般的な理由は微調整ではなく、absolute の子孫のための含まれるブロックを確立することです。次のセクションはこれに基づいています。

Junoposition プロパティ すべてが static として始まり、通常の場所に座ります。position: relative に切り替えると、top、right、bottom、left で微調整でき、元のスペースは予約されたままです。これらのオフセットプロパティは要素が位置指定されるまで機能しないため、top が無視されるように見える場合は、最初に position を設定したことを確認してください。

Junoposition プロパティstatic はデフォルトで、オフセットを完全に無視します。これが、プレーン要素上の top: 20px が何もしない理由です。relative は要素を通常の場所から微調整してスペースを保持したままにするため、隣人は隙間を埋めるために移動しません。微調整は便利ですが、relative に到達する本当の理由は、次に来る絶対位置指定の子を固定することです。

Junoposition プロパティ 5つの値を流れ内のスペースを保つかどうかで並べ替えます。static と relative は保ちます。absolute と fixed は保ちません。sticky は2つの間で切り替わります。relative のオフセットはコンテナに対してではなく、要素の独自の通常の位置に対して解決され、対立するオフセットは開始側を勝たせます。微調整ツールとしてではなく、絶対的な子を固定するための relative をより頻繁に使用します。

絶対ポジショニング

position: absolute はより大きな動きです。要素を通常のフローから完全に持ち上げるため、もはやスペースを占めず、その周囲の要素は、それが存在したことがないかのように縮まります。次に、同じ top、right、bottom、left オフセットを使用して配置します。

質問は次のとおりです。何に対するオフセットでしょうか？絶対要素は、最も近い**位置指定された祖先**（static 以外の position を持つ最も近い親）に対して自身を配置します。これが、バッジオンカードパターンが常にペアで来る理由です。カードを relative にして参照ポイントにし、次にバッジを absolute にしてカードの隅に配置できるようにします。

.card {
  position: relative;        /* 参照ポイントになる */
}

.card .badge {
  position: absolute;
  top: 8px;                  /* カードの上から8px */
  right: 8px;                /* カードの右から8px */
}

カードに position: relative がない場合、バッジはページをさらに上まで位置指定された祖先を探し、意図していない場所に着陸します。

絶対ポジショニングは要素を通常フローから完全に削除します。スペースを占めず、前の隣人は消えたかのように一緒に縮まり、オフセットプロパティで配置します。オフセットは要素の含まれるブロック（それ自体が位置指定されている最も近い祖先のパディングエッジ）に対して測定されます。

その「最も近い位置指定された祖先」ルールは、絶え間なく使用するパターンの中心です。親を position: relative に設定し（それ自体では視覚的には何も変わらない）、それはその中の絶対的な子のための参照フレームになります。

.dropdown {
  position: relative;        /* 参照フレーム、視覚的な変化なし */
}

.dropdown .menu {
  position: absolute;
  top: 100%;                 /* トリガーの直下 */
  left: 0;                   /* 左エッジに合わせる */
  width: 200px;
}

位置指定された祖先がない場合、絶対要素は初期含有ブロック（大まかにはビューポート）にフォールバックし、通常はページの左上隅に配置されます。配置が間違った絶対要素は、ほぼ常に親に欠落した position: relative です。

絶対位置指定された要素は通常フローから取り出されます。フローにボックスを生成せず、親の高さに貢献せず、兄弟はそれが存在しないかのようにレイアウトします。その後、含有ブロックに対して配置されます。含有ブロックルールを正確に取得することが、「機能する」と「機能し、その理由を知っている」を分ける要因です。

absolute 要素の場合、含有ブロックはその position が static ではない最も近い祖先のパディングボックスです。複数の祖先が適格な場合、最も近い祖先が勝ちます。適格な祖先がない場合、含有ブロックは初期含有ブロック（ビューポートサイズの長方形がドキュメントに固定されている）であり、これが固定されていない絶対要素がページの左上隅にドリフトする理由です。

.field {
  position: relative;        /* 含有ブロックを確立 */
  padding: 12px;
}

.field .clear-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);   /* .field に対する垂直方向の中央 */
  /* オフセットは .field のコンテンツボックスではなく、パディングボックスから測定 */
}

人々を驚かせ、高度な含有ブロック図に重要な1つのルール。祖先の transform、filter、または will-change は、設定された position がなくても、絶対の子孫のための含有ブロックを確立します。そのため、絶対的な子は、アンカーとして考えなかった変形された祖父母に突然その親を変更できます。絶対要素が「間違った」要素に対して配置されるとき、親として position を確認するだけではなく、ツリー上の迷路の transform を確認してください。

Juno絶対ポジショニングposition: absolute は要素をフローから引き出すため、スペースを占めず、隣人がその後ろに閉じ込められます。その後、position が設定されている最も近い親に対して配置されます。これが、バッジオンカードのトリックがペアである理由です。カードに relative、バッジに absolute なので、バッジはカードの隅に着陸し、どこかランダムな場所ではなく。

Juno絶対ポジショニング 絶対要素は完全にフローを離れ、含有ブロック（それ自体が位置指定されている最も近い祖先）に対して配置されます。日常的なパターンは親に position: relative が視覚的には何も変わりませんが、参照フレームになります。その後、子に absolute を設定します。絶対要素がページの左上隅に着陸する場合、位置指定された祖先がなく、ビューポートにフォールバックしたことを意味します。

Juno絶対ポジショニング 絶対要素の含有ブロックはその最も近い非static 祖先のパディングボックス、または存在しない場合はビューポートです。罠は transform、filter、will-change も position なしで含有ブロックを作成するため、子は忘れた変形された祖父母を固定できます。オフセットが間違った要素に着陸する場合、欠落した position だけではなく、ツリーで迷路の transform をスキャンしてください。

固定と粘性

position: fixed は要素をスクリーン自体に固定します。これは absolute と同様にフローを離れますが、親に固定するのではなく、ビューポート（表示される窓）に固定されます。固定されると、ページをスクロールしても画面上の同じ場所に留まります。これが、ナビゲーションバーまたは「トップに戻る」ボタンが常に表示されている方法です。

.site-header {
  position: fixed;
  top: 0;                    /* ウィンドウの上部に固定 */
  left: 0;
  right: 0;                  /* 全幅に拡張 */
}

position: sticky は優しい中間地点です。粘性要素は通常ページと一緒にスクロールしますが、設定した閾値に達すると、所定の位置に粘着します。セクションの見出しがそのコンテンツと一緒にスクロールアップしてから、画面の上部で保持されるのは典型的な例です。

.section-title {
  position: sticky;
  top: 0;                    /* 上端に達すると粘着 */
}

**固定ポジショニング**は絶対と同じように機能しますが、含有ブロックは祖先ではなく常にビューポートです。固定要素はフローから削除され、画面上の固定スポットに固定されるため、ページをスクロールしても移動しません。これは永続的なクローム（トップバー、クッキーバナー、フローティングアクションボタン）のツールを作成します。

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  /* 下のコンテンツは隠れないように padding-top: 64px が必要 */
}

そのコメントは主な問題を指摘します。固定ヘッダーはフローから外れているため、その下のコンテンツと重なるため、通常、ページボディに一致するパディングまたはマージンを追加して、コンテンツをクリアにプッシュします。

粘性ポジショニングはハイブリッドです。要素はビューに含まれている間は relative として機能し、top、bottom、left、または right で設定した閾値に達すると、fixed のような動作に切り替わります。閾値オフセットのない粘性要素は、粘着する線がないため、粘着することはありません。

.section-title {
  position: sticky;
  top: 16px;                 /* そこに達すると上から16px保持 */
}

fixed は absolute の1つの違いで、重要な違いがあります。その含有ブロックはビューポートであるため、画面に固定されており、ドキュメントと一緒にスクロールしません。これは永続的なUIに適切ですが、2つの注意点があります。フロー内のコンテンツと重なり（ボディにパディングでスペースを予約）、および絶対的な同じ transform はオーバーライドルールを確立し、祖先 transform が fixed 要素をその祖先内にトラップし、それと一緒にスクロールします。謎のようにスクロールする「固定」要素は、ほぼ常に変形された祖先の下に座っています。

**粘性ポジショニング**は5つのうちで最も条件付きです。粘性要素は通常フロー内にレイアウトされ、そのスペースを保持し、最も近いスクロール祖先がそれを宣言した閾値にスクロールするまでそこに留まります。そこから、含有ブロックがスクロール過去になるまで閾値に保持され、その時点でそれはリリースされます。人々が逃す2つの要件：

.toc {
  position: sticky;
  top: 24px;                 /* 閾値；オフセットなしでは粘着しない */
  /* .toc の親がまだ画面に表示されている間だけ粘着 */
}

まず、粘性は閾値オフセット（top、bottom、left、または right）を必要とします。なしでは、粘着する線がなく、プレーンな相対要素のように機能します。次に、それはその親の範囲内でのみ粘着できるため、親が短い場合、親がビューのスクロールアウトの直後に要素が解放されます。そして頻繁な静かな失敗。overflow: hidden、scroll、または auto を持つ祖先は粘性要素のスクロールコンテナになるため、粘性アイテムは期待していないコンテナ内に限定されているため、静かに何もできません。

Juno固定と粘性position: fixed は要素を画面に固定するため、スクロール時に所定の位置に留まります。これは、ヘッダーまたはトップへのボタンが周りに留まっている方法です。position: sticky は中間地点です。ページと一緒にスクロールしてから、top: 0 のような閾値に粘着します。固定はそれの下にあるものと重なるため、カバーするコンテンツのために何らかのスペースを残してください。

Juno固定と粘性fixed はビューポートに固定されていますが、祖先 transform がそれをその祖先内にトラップし、スクロールします。そのため、スクロールする「固定」要素には通常、変形された親があります。sticky には人々が忘れる2つのことが必要です。閾値オフセットと十分に背の高い親。粘着する親がスクロールオフの瞬間にリリースされるため。

Juno固定と粘性fixed はビューポートに固定されていますが、祖先 transform がそれをその祖先内にトラップし、スクロールします。そのため、スクロールする「固定」要素には通常、変形された親があります。sticky には人々が忘れる2つのことが必要です。閾値オフセットと十分に背の高い親。その親がスクロールオフの瞬間にリリースされるため。そしてオーバーフロー セットで祖先を見たら、スクロール コンテナになり、粘着を静かに停止できます。

z-indexでスタック

要素が重なるとき、何がトップに座るかを決めるものが必要です。これが z-index が制御するものです。より高い z-index は低いものの前に描かれるため、z-index: 10 のドロップダウンは z-index: 1 のカードをカバーします。

1つのルールは誰もつまずきます。z-index は位置指定された要素でのみ機能します。要素がまだ static の場合、その z-index は無視されます。そのため、ほぼ常に position と z-index を一緒に設定します。

.modal {
  position: fixed;
  z-index: 100;              /* 通常のページコンテンツの上に座る */
}

.modal-overlay {
  position: fixed;
  z-index: 99;               /* ダークバックドロップ、モーダルの1ステップ後ろ */
}

通常、ここで大きな数値は必要ありません。9999 の全ページが互いに戦う場合より、1、10、100 のような小さく整理されたスケールの方が考えやすいです。

2つの要素が重なるとき、z-index はそれらの前から後への順序を設定します。高い数値は低い数値の上に描きます。キャッチは、z-index は位置指定された要素にのみ影響します。静的要素に z-index を与え、何も起こりません。そのため、z-index と position はほぼ常に一緒に移動します。

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

.tooltip {
  position: absolute;
  z-index: 50;               /* カードの上、モーダルの下 */
}

早期に形成する価値がある習慣は、数字を増加させるのではなく、小さく意図的なスケールです。z-index: 9999 を書いて何かに勝つことに気付いた場合、実際の修正は通常、より大きな数値ではなく、スタック値の計画です。次のレベルでは、より大きな数値が場合によっては失う理由を説明します。

z-index は位置指定された要素を z軸に沿って順序付けし、前面に高い、後面に低い、そして static 要素では無視されます。5分のバグを1時間に変える部分は、スタックコンテキストです。z-index 値が比較されている自己完結したグループ、およびその兄弟に対して単一のユニットとしてスタックされます。

スタッキングコンテキストは、要素が auto 以外の z-index で位置指定されるたびに形成されますが、1 より下の opacity、任意の transform、filter、will-change、isolation: isolate、およびその他の数個からも形成されます。重要なことに、z-index は同じスタッキングコンテキスト内でのみ比較されます。要素がコンテキスト内に座ると、その z-index はその数がどのくらい大きいかに関係なく、そのコンテキスト外のどのような上にでも持ち上げられません。

.card {
  opacity: 0.98;             /* これ単独でスタッキングコンテキストを作成 */
}

.card .badge {
  position: absolute;
  z-index: 9999;             /* .card のコンテキスト内にトラップ */
}

.sibling-panel {
  position: relative;
  z-index: 2;                /* 依然として .badge の上に描く */
}

ここで .badge at 9999 は .sibling-panel at 2 に負けます。なぜなら .badge は .card の opacity が作成したコンテキスト内に限定されており、そのコンテキスト全体が .sibling-panel より下でランク付けされるからです。高い z-index が勝つことを拒否する場合、答えはほぼ常に高い数値ではなく、静かにスタッキングコンテキストを開いた祖先です（多くの場合 opacity または transform）、修正は代わりにその祖先を上げるか分離することです。

判断に関する終了ポイント。ポジショニングと z-index はオーバーレイ、バッジ、固定クローム用です。フローから逃げるか、上に座る必要があるもの。主な構造を配置するための間違ったツールです。フローに応じるべき行、列、グリッド、およびビューポートについては、flexbox に到達するか、ボックスモデル 内のボックスモデル駆動フローに到達してください。これらの上に浮かぶレイヤーのためにポジショニングを保ちます。

Junoz-indexでスタック 要素が重なるとき、z-index はどれがフロントにあるかを決定します。より高い数値は勝ちます。位置指定された要素でのみ機能するため、プレーンな static 要素の z-index は無視され、position と z-index を一緒に設定します。9999 のパイルの代わりに、1、10、100 のような小さく整然とした数値を保ちます。

Junoz-indexでスタックz-index は位置指定された要素の前から後への順序を設定し、static のものでは何もしないため、position と一緒に乗ります。増加数ではなく、小さく意図的なスケールに到達してください。9999 を書いて勝つ場合、より大きな値ではなく計画が必要です。そしてより大きな値が場合によっては失う理由の深い比較をスタックコンテキストが説明します。

Junoz-indexでスタックz-index はスタッキングコンテキスト内でのみ比較され、1 より下の opacity、transform、filter のようなものが静かに1つを作成します。これが、z-index: 9999 で子が外側の要素at 2 にまだ失う理由です。それはその祖先のコンテキストに限定されています。高い数値が勝つことを拒否する場合、欠落した position ではなく、コンテキストを開いた祖先を探し、その祖先を上げ、オーバーレイのためにポジショニングを保ちます。