Z インデックスが固定位置で期待どおりに機能しないのはなぜですか?

z-index が固定位置で機能しない

ページ レイアウトでは、z-index が Web ページ上の要素の積み重ね順序を決定します。より高い値が上に表示されます。ただし、直感に反して要素が固定的に配置されている場合、z-index を使用して静的に配置された要素の背後に要素を配置するのが難しい場合があります。

例

次の HTML および CSS コードを考えてみましょう:

<div>

#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 は上に残ります。

説明

交絡的な動作は、固有の要素から発生します。静的配置と固定配置の違い。

• 静的配置では、要素はそのままの状態で Z インデックスの影響を受けません。一方、固定配置は、通常のフローから要素を削除し、ビューポート (ユーザーの画面) を基準にして配置します。
• このコンテキストでは、z-index は、他の固定要素に対する固定要素の積み重ね順序のみを決定します。 elements.

解決策

この問題を修正するには、静的に配置された要素を基準にして、position: を追加します。これにより #over の新しいスタッキング コンテキストが作成され、z-index が新しく作成されたコンテキストに対する相対的な位置を決定できるようになります:

以上がZ インデックスが固定位置で期待どおりに機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。