なぜ「position:relative」は「z-index」と同様に積み重ね順序に影響を与えるように見えるのでしょうか?

コードが Z-Index のような動作を示す理由

マークアップ内の .container 要素には、position:relative が含まれています。一見、z-index の効果を模倣しています。この動作は、CSS の描画順序に起因します。

描画の順序と位置

CSS 仕様は、レイヤーが画面上に描画される順序を指定します。 Position:relative を指定しないと、.container 要素は「インフロー」になり、ペイント順序のステップ 4 でペイントされます。

逆に、position:relative を追加すると、.container は「positioned」になり、次の条件に該当します。ペイントオーダーのステップ8。

ツリーオーダーペイント

内各ペイント ステップでは、要素は「ツリー順序」でペイントされます。あなたの場合、.container 要素と .mask 要素は両方とも位置決め要素です。どちらも明示的な Z インデックス値を持たないため、ツリーの順序によってどちらが上に描画されるかが決まります。

要素の並べ替え

最初のマークアップでは、.mask 要素が階層内の .container の後に表示されます。したがって、両方の要素が配置されると、.mask は最後に描画され、.container を覆います。

ただし、.container が .mask の後に来るように要素を並べ替えると、両方の要素がステップ 8 で描画されます。 、まだツリー順にあります。このシナリオでは、.container が最後に描画され、以前に確認した「z-index の動作」が削除されます。

以上がなぜ「position:relative」は「z-index」と同様に積み重ね順序に影響を与えるように見えるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。