Pourquoi l'arrière-plan de ma division superposée apparaît-il derrière son contenu ?

Comprendre l'ordre de peinture CSS et les éléments qui se chevauchent

Dans le scénario donné, nous observons deux divs avec des arrière-plans contradictoires, l'un se chevauchant l'autre. Cependant, le div qui se chevauche glisse entre l'arrière-plan et le contenu du div sous-jacent en raison de règles d'ordre de peinture CSS spécifiques.

Selon la documentation CSS Painting Order du W3C, l'ordre de peinture des descendants d'un élément avec un contexte d'empilement (que le div superposé possède en raison de sa marge négative) est le suivant :

1. Empiler des contextes à partir de négatifs Indices z : Tout d'abord, tous les éléments enfants avec des indices z négatifs forment leurs propres contextes d'empilement et sont peints par ordre décroissant.
2. Enfants non positionnés dans le flux : Suivant , tous les enfants au niveau du bloc non positionnés dans le flux (qui incluent le deuxième div dans ce cas) sont peints dans l'arborescence ordre.
3. Arrière-plans et bordures des enfants au niveau du bloc entrant : Au sein de chaque enfant, leurs arrière-plans et leurs bordures sont peints. L'arrière-plan du div qui se chevauche est peint à ce stade.
4. Enfants en ligne non positionnés dans le flux : Après avoir peint tous les enfants au niveau du bloc, tous les éléments en ligne et leur contenu sont peints dans l'ordre arborescent. .
5. Empilage de contextes à partir d'indices z positifs : Enfin, empilage de contextes à partir d'éléments avec des indices z positifs :
Les indices z sont peints par ordre croissant.

Implications pour les éléments qui se chevauchent

Le problème spécifique avec les divs qui se chevauchent est que l'arrière-plan du deuxième div (de l'étape 3) est peint avant son contenu textuel (à partir de l'étape 4). Cela fait apparaître le texte entre le contenu et l'arrière-plan du premier div.

Résoudre le problème

Pour résoudre ce problème, vous pouvez utiliser l'une des approches suivantes :

• Définissez un z-index positif pour le div qui se chevauche :
Cela garantira son contexte d'empilement est peint après l'arrière-plan du premier div.
• Utilisez CSS position:relative sur le div qui se chevauche :
Cela créera un nouveau contexte d'empilement pour le div et ses descendants, vous permettant de contrôler la peinture ordre en utilisant z-index.
• Ajoutez un calque transparent sur le div qui se chevauche :
Cela déplacera efficacement le contenu du texte vers le calque "au-dessus", en contournant l'arrière-plan du div qui se chevauche.

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!