固定位置決めにより Z インデックスの順序が崩れるのはなぜですか?

固定配置による Z-Index のパラドックスを理解する

HTML 要素を扱う場合、z-index プロパティはスタック順序を制御し、どの要素がページ上で他の要素の上または下に表示されるか。ただし、固定および静的に配置された要素で z-index を使用すると、予期しない動作が発生します。

次のコード スニペットを考えてみましょう:

#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

#over を持つ要素が表示されることが期待されます。 #under の後ろにあるのは、z-index 値が高いためです。ただし、固定要素 (#under) は、想定される低い優先度を無視して #over を頑固にオーバーレイします。

これは、固定配置により通常のドキュメント フローから要素が削除されるためです。ビューポートに基づいて要素を配置し、基本的に上部に別のレイヤーを作成します。その結果、固定要素の Z インデックスは、非固定要素の Z インデックスと相互作用しません。

この問題を修正して、#over が #under の後ろに表示できるようにするには、position:relative を追加します。 ; to #over:

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

この小さな調整により、#over 内に新しいローカル スタッキング コンテキストが確立され、その z インデックスがそのコンテキスト内の要素に影響を与えることができるようになります。これで、#under は、意図した重なり順を尊重して #over の後ろに正しく表示されるようになります。

固定位置は、ページ上に絶対位置を作成するための強力なツールですが、z-index を操作する場合には制限があることに注意してください。特定のシナリオでは。位置: 相対トリックを適用すると、重ね順の制御を取り戻し、目的の重ね合わせ効果を実現できます。

以上が固定位置決めにより Z インデックスの順序が崩れるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。