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

位置: 相対的である理由Z インデックスに影響しますか?

予期せず、設定位置: 相対;要素上の z インデックスが変更されたように見える場合があります。これは、ペイント順序と呼ばれる、スタッキング コンテキストの順序によって発生します。

標準ペイント順序

position:relative; を使用しない場合、要素は次の順序の 4 番目のステップでペイントされます。

1. ルート要素
2. インライン、非配置子孫
3. インラインブロック子孫
4. フロー内、位置決めされていない、ブロックレベルの子孫

位置を指定したペイント: 相対;

位置の追加: 相対;要素に追加すると配置されるため、他の配置要素とともに 8 番目のステップで描画されます。

5. インライン、非配置、インラインブロックの子孫
6. インライン、非-位置決めされた要素の位置決めされた子孫
7. inline-block の位置決めされた非テキストの子孫要素
8. ツリー順序でのすべての配置、不透明度、または変換の子孫 (Z インデックス順序の影響を受けない限り)

両方この場合、コンテナとマスクが配置され、Z インデックスが指定されていないため、それらの描画の順序はツリーの順序によって決まります。デフォルトでは、マスクは HTML のコンテナの後に配置されるため、後で描画されます。

テキストが非表示になる理由

本来は、position:relative; を指定しないと、タイトル テキストが後ろに隠れます。マスクは後のステップでペイントされるため、青いオーバーレイになります。ただし、position:相対の場合は、がコンテナに適用されると、配置されるため、ステップ 8 でもペイントされます。 HTML ではコンテナーがマスクの前に配置され、どちらにも指定された Z インデックスがないため、コンテナーが最初に描画され、テキストがマスクの上に表示されます。

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