重複する Div の背景がコンテンツの背後に表示されるのはなぜですか?

CSS 描画順序と要素の重なりを理解する

指定されたシナリオでは、背景が矛盾し、一方が他方と重なり合う 2 つの div が観察されます。ただし、特定の CSS ペイント順序ルールにより、重複する div は背景と基礎となる div のコンテンツの間でスライドします。

W3C の CSS ペイント順序ドキュメントによると、スタッキング コンテキストを持つ要素の子孫のペイント順序は、 (負のマージンにより重複する div が持つ) は次のとおりです:

1. 負からのコンテキストの積み重ねZ インデックス: まず、負の Z インデックスを持つ子要素は独自のスタッキング コンテキストを形成し、降順で描画されます。
2. フロー内で位置決めされていない子要素: 次、フロー内のすべての位置決めされていないブロックレベルの子 (この場合は 2 番目の div を含む) がツリーで描画されます。
3. フロー内ブロックレベルの子の背景と境界線: 各子の中で、背景と境界線が描画されます。重なっている div の背景はこの段階でペイントされます。
4. インフローの非配置インライン子: すべてのブロックレベルの子をペイントした後、インライン要素とそのコンテンツはツリー順にペイントされます。 .
5. 正の z インデックスからのコンテキストの積み重ね: 最後に、正の z インデックスを持つ要素からのコンテキストの積み重ねZ インデックスは昇順で描画されます。

要素の重なり合いの影響

重なり合う div に関する具体的な問題は、2 番目の div の背景 (ステップから) 3) テキスト コンテンツの前にペイントされます (ステップ 4 から)。これにより、最初の div のコンテンツと背景の間にテキストが表示されます。

問題の解決

この問題を解決するには、次のいずれかの方法を使用できます。

• 重複する div の正の Z インデックスを設定します: これスタッキング コンテキストが最初の div の背景の後に描画されるようにします。
• 重複する div で CSS Position:relative を使用します: これにより、div とその子孫に新しいスタッキング コンテキストが作成され、 Z-index を使用してペイントの順序を制御できます。
• 重なっている部分の上に透明なレイヤーを追加します。 div: これにより、テキスト コンテンツが効果的に「上」のレイヤーに移動され、重なっている div の背景がバイパスされます。

以上が重複する Div の背景がコンテンツの背後に表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。