CSS z-index は要素の積み重ね順序にどのような影響を与えますか?

CSS 要素の積み重ね順序を理解する

CSS では、z-index プロパティは要素の積み重ね順序を決定する上で重要な役割を果たします。ただし、さまざまな位置決めプロパティとどのように相互作用するかを理解するのは混乱する可能性があります。

方法重なり順は機能します

重なり順とは、Web ページ上で重なっている要素の相対的な深さを指します。より高い z-index 値を持つ要素は、より低い値を持つ要素の前に表示されます。ただし、z インデックスは、位置決めされた要素 (つまり、絶対位置、相対位置、固定位置、またはスティッキー位置を持つ要素) にのみ適用されます。

位置決めされた要素および非位置決め要素との相互作用

• 位置決めされていない要素 (位置: static) は常に位置決めされた要素の下に積み重ねられます
• 位置決めされた要素に Z インデックスが指定されていない場合、それらはソース コードの順序に基づくデフォルトのスタック順序に従います。
• Z インデックス値が適用される場合、位置決めされた要素はスタックされますソース コードの順序に関係なく、これらの値に基づきます。
• 負の z-index 値を持つ要素は、ルートの背景と境界線の後ろに表示されます。 element.

スタッキング コンテキスト

スタッキング コンテキストは、配置された要素のコンテナとして機能するドキュメント内の長方形の領域です。要素が配置され、Z インデックスが適用されると、その子要素を他のスタッキング コンテキストから分離する新しいスタッキング コンテキストが作成されます。

混合要素タイプの影響

1.混合兄弟要素:

• 兄弟要素の位置が異なる場合 (位置決めと非位置決めが混在)、z-index 値を持つ位置決め要素は常に非位置決め要素の前に積み重ねられます。 .
• 両方の兄弟要素が z-index 値で配置されている場合、より大きい値を持つ要素が次の位置に表示されます。正面。

2.ネストされた混合兄弟要素:

• 配置された親要素に配置された子要素と配置されていない子要素の両方が含まれる場合:

  • 配置された子要素は次のとおりです。
  • 配置されていない子要素は、配置された親の下に積み重ねられます。
• ネストされた配置要素の Z-index 値が競合する場合、最も内側のスタック コンテキスト内でより高い値を持つ要素が前面に表示されます。

例

次の HTML について考えてみましょう。 code:

<div>
  <div>

この例では、ボックス 1 は、親 div によって作成されたスタッキング コンテキスト内でより高い Z インデックスを持つため、ボックス 2 の前に表示されます。ボックス 2 は、位置が高く、z インデックスが低いため、ボックス 1 の後ろに表示されます。

以上がCSS z-index は要素の積み重ね順序にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。