Comment « position:relative; » semble-t-il affecter l'index Z ?

Comprendre les effets de position:relative; sur Z-Index

Dans certains scénarios, en utilisant "position : relatif;" sur un élément semble modifier son z-index, ce qui prête à confusion. Cette réponse vise à clarifier ce comportement en faisant référence à la spécification de l'ordre de peinture CSS.

Ordre de peinture CSS

L'ordre de peinture CSS dicte l'ordre dans lequel les éléments HTML sont peints sur l'écran. Pour les éléments non positionnés (c'est-à-dire sans ensemble "position:absolute;" ou "position:relative;"), ils sont peints dans l'ordre du balisage HTML (étape 4). Cependant, les éléments positionnés (tels que .mask dans l'exemple de code fourni) sont peints plus tard, après tous les éléments non positionnés (étape 8).

Impact de positionnement relatif

Quand position : relative ; est appliqué à un élément (tel que .container), il se positionne par rapport à son flux normal. Par conséquent, il est supprimé de l'ordre de peinture de l'étape 4, tombant plutôt sous l'étape 8 avec d'autres éléments positionnés.

Dans le code donné, .mask est peint en étape 8 (car elle est positionnée de manière absolue), tandis que .container (sans position:relative;) serait peint en étape 4. Ainsi, .mask apparaît devant .container, comme prévu.

Cependant, if position:relative; est appliqué à .container, il relève également de l'étape 8 ordre de peinture. Étant donné que .mask et .container sont tous deux positionnés et n'ont pas d'index z spécifié, l'élément qui apparaît plus tard dans le document (c'est-à-dire .container) sera peint au-dessus de l'autre élément (c'est-à-dire .mask).

Conclusion

En comprenant l'ordre de peinture CSS, il devient clair pourquoi définir position:relative; sur un élément conteneur peut sembler affecter son z-index. Ce comportement est dû au fait que l'élément est positionné et est donc peint plus tard dans le processus de rendu, ce qui entraîne un changement dans l'ordre visuel par rapport aux autres éléments positionnés.

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!