z-index が固定位置要素で機能しないのはなぜですか?

z-index が固定配置で機能しない: 理由を解明する

固定配置は、所定の位置に残る要素を作成するための強力なツールです。スクロールに関係なく画面が表示されます。ただし、要素の積み重ね順序を制御する z-index プロパティに干渉する場合があります。

説明するには、次のコード スニペットを考えてみましょう。

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

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

ご想像のとおり、 #over 要素は、z-index が高いため、#under 要素の上に表示される必要があります。ただし、このシナリオでは、#under は依然として #over をオーバーレイします。なぜこのようなことが起こっているのでしょうか?

その答えは、#over のデフォルトの位置にあります。デフォルトでは、要素の位置は静的です。つまり、要素はドキュメント フロー内の自然な位置を占めます。一方、固定位置要素は通常のフローから削除され、ページのビューポートを基準とした特定の座標に配置されます。

この場合、#under の固定位置により通常のフローから外されます。したがって、その z インデックスは静的配置の要素とは無関係になります。 #under を #over の後ろに表示するには、#over の位置を相対に設定する必要があります。これにより、ドキュメント フローに #over が配置されますが、指定された z-index に従って位置を移動できるようになります。

修正されたコード スニペットは次のとおりです。

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

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

次に、#under要素は予想どおり #over の下に表示されます。 z-index が適切に機能するには、要素が絶対的または相対的に配置されている必要があることに注意してください。

以上がz-index が固定位置要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。