HTML コンテンツが重なっても、背景が見えにくくならない場合があるのはなぜですか?

コンテンツの重複問題の原因は何ですか?

HTML/CSS で 2 つの要素が重複する場合、コンテンツが重複する要素の背景で覆われないことがあります。これは、CSS レンダリング モデルで指定された特定のペイント順序が原因で発生します。

CSS ペイント順序

CSS ペイント順序は、Web ページ上で要素が視覚的にレンダリングされる順序を決定します。これは、コンテンツのどのレイヤーが最初に描画されるかを指定する一連のルールによって定義されます。簡略化した概要は次のとおりです:

1. ルート要素の背景: ルート要素 () の背景色はキャンバス全体をカバーします。
2. 子要素の背景: 子要素がブロック要素の場合 (例:
   )、その背景色と画像はルート要素の背景の上に描画され、要素の幅と高さ全体がカバーされます。
3. 境界線: 子の境界線要素は背景の上に描画されます。
4. テキスト コンテンツ: 最後に、子要素のテキスト コンテンツは次のとおりです。

指定された例の問題

指定された例には、2 つの要素があります:

1. .box: A
   背景が赤です。
2. .bottom: 別の
   緑色の背景とマイナスのマージンが適用され、.box と重なり合います。

   ペイントの順序に従って:

   1. の白い背景。が最初に描画され、ページ全体が覆われます。
   2. .box の赤い背景が次に描画され、ブロック要素であるため、要素の幅と高さ全体が覆われます。
   3. 次に、.bottom の緑色の背景がペイントされますが、負のマージンにより、.box のテキスト コンテンツとその背景の間でスライドします。
   4. 両方の要素のテキスト コンテンツは、

   結論

   観察された動作は、事前定義された CSS ペイント順序の結果であり、重なり合う要素の背景画像や色よりもテキスト コンテンツのレンダリングを優先します。