固定配置された要素が、より高い Z インデックスを持つ静的に配置された要素の前に表示されるのはなぜですか?

z-index の問題が解決されました: 固定配置について理解しました

z-index を設定したにもかかわらず、固定配置の要素を作成するのが難しい場合があります静的に配置されたものの後ろに表示されます。一般的な回避策には、静的要素で絶対位置を使用することが含まれます。

この動作をさらに詳しく調べるには、次の例を検討してください。

<div>
<pre class="brush:php;toolbar:false">#over {
  width: 600px;
  z-index: 10;
}

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

お気づきのとおり、修正されたのは要素 (z インデックス 1) は、静的要素 (z インデックス 10) の前に残ります。これは、デフォルトでは、静的に配置された要素にはスタッキング コンテキストがないため、つまり、z-index の影響を受けないために発生します。

これを解決するには、position:relative to を追加して、静的要素のスタッキング コンテキストを定義できます。 。これにより、z-index プロパティが期待どおりに機能する新しい z-index レイヤーが作成されます。

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

これで、固定要素が意図したとおり静的要素の後ろに表示されます。この簡単な調整により、Z インデックスの適切な動作が確保され、要素の階層化を効果的に制御できるようになります。