Pourquoi l'arrière-plan des éléments qui se chevauchent apparaît-il derrière le contenu ?

Contenu non couvert par l'arrière-plan des éléments qui se chevauchent

Cette différence est due à l'ordre de rendu distinct des composants CSS. Les éléments HTML sont rendus dans l'ordre suivant :

1. Arrière-plans et bordures des éléments parents
2. Arrière-plans et bordures des éléments enfants
3. Contenu des éléments enfants

Dans l'exemple fourni, la deuxième div a une marge supérieure négative appliquée, ce qui la fait chevaucher la première div. Cependant, en raison de l'ordre de rendu mentionné ci-dessus, l'arrière-plan du deuxième div est peint sous le contenu du premier div.

Pour clarifier, l'ordre d'imbrication et la disposition des éléments individuels influencent le résultat visuel. Le contenu est placé au-dessus des arrière-plans en raison de l'importance perçue du texte. Cet ordre de priorité peut être observé dans des scénarios plus complexes :

body {
  background: pink;
}

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

L'ordre de rendu pour cet exemple est le suivant :

1. Arrière-plan de
2. Arrière-plan et bordure du premier
3. Contenu du premier
4. Fond et bordure de la seconde
5. Contenu de la seconde

   Cependant, en attribuant une position : par rapport à un élément, nous pouvons modifier ce comportement. Cette action crée un nouveau contexte d'empilement, nous permettant de contrôler le placement de l'élément à l'aide de z-index. Ce mécanisme permet de positionner visuellement les éléments dans l'ordre souhaité, quelle que soit la structure HTML.

   Il est important de noter que ce phénomène n'est pas particulièrement intuitif. Cependant, en comprenant l'ordre de rendu CSS, nous pouvons anticiper et contrôler ces effets visuels.