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

重複する要素の背景で覆われていないコンテンツ

この不一致は、CSS コンポーネントのレンダリング順序が異なるために発生します。 HTML 要素は次の順序でレンダリングされます。

1. 親要素の背景と境界線
2. 子要素の背景と境界線
3. 子要素のコンテンツ

この例では、2 番目の div に負のマージントップが適用されているため、最初の部門。ただし、上記のレンダリング順序により、2 番目の div の背景は最初の div のコンテンツの下に描画されます。

明確にするために、ネスト順序と個々の要素のレイアウトは視覚的な出力に影響します。テキストの重要性が認識されるため、コンテンツは背景の上に配置されます。この優先順位は、より複雑なシナリオでも確認できます:

body {
  background: pink;
}

div {
  background: red;
  border: 3px solid brown;
  margin-bottom: -20px;
}

この例のレンダリング順序は次のとおりです:

2. 最初の
   の背景と境界線
3. の内容1 番目の
4. 2 番目の
5. の背景と境界線
2 番目の
の内容
ただし、位置を割り当てることで: 相対要素に追加すると、この動作を変更できます。このアクションにより新しいスタッキング コンテキストが作成され、z-index を使用して要素の配置を制御できるようになります。このメカニズムにより、HTML 構造に関係なく、要素を希望の順序で視覚的に配置することが可能になります。
この現象は特に直感的ではないことに注意することが重要です。ただし、CSS のレンダリング順序を理解することで、これらの視覚効果を予測して制御できます。