Comment la « position : relative » affecte-t-elle le chevauchement des éléments et l'index Z ?

Pourquoi la position : relative ; Vous semblez modifier l'index Z ?

Lorsque vous travaillez avec une mise en page Web, définir un élément sur position : relative peut sembler modifier son z-index et affecter la façon dont il se chevauche avec d'autres éléments. Cependant, il est important de comprendre la mécanique sous-jacente à l'ordre de peinture pour clarifier ce qui se passe réellement.

Sans position : relatif, l'élément n'est pas positionné et est rendu lors de l'étape de peinture réservée aux éléments non positionnés. Cependant, les éléments avec position: relative sont considérés comme "positionnés" et sont peints dans une étape ultérieure.

Maintenant, lorsque vous placez la règle position: relative sur le conteneur, elle devient également un élément positionné. Selon l'ordre de dessin, les éléments positionnés sont rendus dans l'ordre dans lequel ils apparaissent dans le code HTML. Puisque le conteneur est rendu après l'élément .mask, il apparaîtra au-dessus de la superposition bleue.

Si vous deviez changer l'ordre des éléments dans le code HTML, en plaçant l'élément .mask après le conteneur, le effet de position : le relatif sur le z-index disparaîtrait. En effet, les deux éléments seraient toujours peints dans le même ordre en raison de l'ordre de l'arbre.

En résumé, position: relative ne modifie pas directement le z-index mais influence plutôt l'ordre de peinture des éléments. En comprenant les étapes de peinture, nous pouvons prédire avec précision comment les éléments se chevaucheront et ajuster notre disposition en conséquence.

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!