`position:relative;` は Z インデックスにどのような影響を与えるようですか?

Z インデックスに対する position:relative; の影響を理解する

特定のシナリオでは、「position:相対的;"要素の z インデックスが変更されるように見えるため、混乱が生じます。この回答は、CSS ペイント順序の仕様を参照することで、この動作を明確にすることを目的としています。

CSS ペイント順序

CSS ペイント順序は、HTML 要素がペイントされる順序を決定します。画面上に。位置指定されていない要素 (つまり、「position:absolute;」または「position:relative;」が設定されていない) の場合、HTML マークアップの順序で描画されます (ステップ 4)。ただし、配置された要素 (提供されたコード例の .mask など) は、すべての非配置要素 (ステップ 8) の後で描画されます。

相対配置の影響

position:relative の場合。要素 (.container など) に適用されると、要素は通常のフローに対して相対的に配置されます。その結果、この要素は ステップ 4 の描画順序から削除され、代わりに他の配置要素とともに ステップ 8 に分類されます。

指定されたコードでは、.mask は描画されます。 ステップ 8 (絶対に配置されているため)、.container (position:relative; なし) はペイントされます。 ステップ 4。したがって、予想どおり、.mask は .container の前に表示されます。

ただし、position:relative; の場合は、.container の前に表示されます。 .container に適用される場合、ステップ 8 のペイント順序にも当てはまります。 .mask と .container は両方とも位置決めされており、z-index が指定されていないため、ドキュメント内で後から表示される要素 (つまり、.container) は、他の要素 (つまり、.mask) の上に描画されます。

結論

CSSの描画順序を理解すると、なぜ設定するのかが明確になります位置:相対;コンテナ要素上の z インデックスに影響を与えるように見えることがあります。この動作は、要素が配置され、レンダリング プロセスの後半で描画されるため、他の配置された要素と比較して視覚的な順序が変更されることが原因です。

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