Quel est l'impact de « position : relative ; » sur l'index Z et l'ordre d'empilement des éléments ?

Pourquoi la position : relative ; Affecter l'index Z ?

De façon inattendue, réglage de la position : relative ; sur un élément peut sembler changer son z-index. Cela se produit en raison de l'ordre du contexte d'empilement, appelé ordre de peinture.

Ordre de peinture standard

Sans position : relative ;, un élément est peint à la quatrième étape dans l'ordre :

1. Élément racine
2. En ligne, non positionné descendants
3. Descendants de blocs en ligne
4. Descendants en flux, non positionnés, au niveau du bloc

Peinture avec position : relative ;

Ajout de position : relative ; à un élément le positionne, il est donc maintenant peint à la huitième étape avec d'autres éléments positionnés :

5. Descendants de blocs en ligne, non positionnés
6. En ligne, non -descendants positionnés d'éléments positionnés
7. Descendants positionnés et non textuels du bloc en ligne éléments
8. Tous les descendants positionnés, opaques ou transformés dans l'ordre arborescent (sauf s'ils sont soumis à l'ordre z-index)

Puisque les deux le conteneur et le masque sont positionnés dans ce cas et aucun z-index n'est spécifié, l'ordre de leur peinture est déterminé par l'ordre de l'arborescence. Par défaut, le masque est placé après le conteneur dans le HTML, il est donc peint plus tard.

Pourquoi le texte est masqué

À l'origine, sans position : relative;, le texte du titre est caché derrière la superposition bleue car le masque est peint à une étape ultérieure. Cependant, lorsque position : relative ; est appliqué sur le récipient, il se positionne et est donc également peint à la huitième étape. Étant donné que le conteneur est placé avant le masque dans le HTML et qu'ils n'ont pas tous deux d'index z spécifié, le conteneur est peint en premier, ce qui fait apparaître le texte au-dessus du masque.

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!