`position:relative` は CSS の Z インデックスと要素の積み重ね順序にどのような影響を与えますか?

「position:relative」属性が Z-Index の動作を変更する理由

HTML と CSS では、「position:relative」プロパティは要素の配置に頻繁に使用されますコンテナ内で。ただし、特定のシナリオでは、明示的には示されていないにもかかわらず、このプロパティが Z インデックスにも影響を与えるように見えることがあります。

この動作を理解するには、CSS の描画順序を詳しく調べる必要があります。 CSS 仕様によれば、要素は次の順序で描画されます:

1. 通常の流れ: 要素は HTML ドキュメントに表示される順序で描画されます。
2. Floats: 浮動要素は通常の後にツリー順序で描画されます。 flow.
3. 位置決め要素: 「static」以外の位置値を持つ要素は、float の後にツリー順序で描画されます。
4. フロー内非位置決めブロック要素: これらの要素は、配置された要素の後にツリー順序で描画されます。
5. 絶対配置要素: 位置が「絶対」の要素は、通常のフロー、フロート、および位置決めされた要素の後にツリー順序で描画されます。

デフォルトでは、明示的な位置が指定されていない要素 (「位置」など) :static" または "position:absolute") は「インフロー」とみなされ、ステップ 4 で描画されます。ただし、その要素の親コンテナーに「position:relative」が指定されている場合、それは位置決めされた要素になり、

指定された例では、「.container」要素に「position:relative」がない場合、「position:absolute」を持つ「.mask」要素が描画されます。は、ステップ 5 (要素を配置した後) でその上にペイントされます。ただし、「position:relative」が「.container」に適用されると、それは位置決めされた要素になるため、ステップ 3 でペイントされます。そのため、「.container」はその子とともに、「」の前にペイントされます。 .mask" 要素を追加すると、テキストの下に青いオーバーレイが表示されます。

DOM (ドキュメント オブジェクト モデル) 内で要素が描画される順序は、必ずしも DOM (ドキュメント オブジェクト モデル) 内の順序と一致しないことに注意することが重要です。それは視覚的に現れます。指定された z-index 値は、どの要素が一番上に表示されるかを決定する際に優先されます。ただし、z-index が指定されていない場合は、上記の描画順序が使用されます。

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