Pourquoi le contenu CSS se chevauche-t-il mais pas les arrière-plans ?

Le contenu se chevauche mais pas l'arrière-plan

Dans CSS, l'ordre de peinture des éléments suit une hiérarchie spécifique. Lorsqu'un élément en chevauche un autre, le contenu de l'élément qui se chevauche est rendu par-dessus. Toutefois, l’arrière-plan de l’élément superposé n’est pas affecté. Au lieu de cela, il reste dans sa position initiale.

Pour comprendre ce comportement, il est important de se référer à la [documentation des commandes de peinture du W3C](https://www.w3.org/TR/css-backgrounds-3 /#l'ordre-de-peinture). Il décrit l'ordre suivant :

1. Couleur de fond de l'élément parent
2. Image de fond de l'élément parent
3. Contenu de l'élément enfant (hors arrière-plans et bordures)
4. Couleur de fond de l'élément enfant
5. Image de fond de l'enfant element
6. Bordures de l'élément enfant

Dans votre code fourni, le fond de l'élément ".box" est peint au point 4. Le fond de l'élément ".bottom" est également peint au point 4. Cependant, le contenu de l'élément ".bottom" (le texte) n'est peint qu'au point 3 de l'élément imbriqué suivant (qui est l'élément racine dans ce cas).

Par conséquent, le contenu de l'élément ".bottom" semble être devant l'arrière-plan de l'élément ".box" car le texte est peint après l'arrière-plan de l'élément ".box". mais avant l'arrière-plan de l'élément ".bottom".

Pour modifier ce comportement, vous pourriez appliquer une faible opacité à l'élément ".bottom", ce qui placerait son contenu dans l'ordre d'empilement avant l'arrière-plan et frontières de l'élément ".box".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!