Comment « position:relative » impacte-t-il l'index Z et l'ordre d'empilement des éléments en CSS ?

Pourquoi l'attribut "position:relative" modifie le comportement du Z-Index

En HTML et CSS, la propriété "position:relative" est fréquemment utilisée pour positionner des éléments dans leur contenant. Cependant, dans certains scénarios, il peut sembler que cette propriété affecte également le z-index, même si cela n'est pas explicitement indiqué.

Pour comprendre ce comportement, il est nécessaire d'approfondir l'ordre de peinture CSS. Selon la spécification CSS, les éléments sont peints dans l'ordre suivant :

1. Flux normal : les éléments sont peints dans l'ordre dans lequel ils apparaissent dans le document HTML.
2. Flotteurs : Les éléments flottants sont peints dans l'ordre arborescent après la normale flow.
3. Éléments positionnés : Les éléments avec des valeurs de position autres que "statiques" sont peints dans l'ordre arborescent après les flottants.
4. Bloc non positionné dans le flux éléments : Ces éléments sont peints dans l'ordre arborescent après les éléments positionnés.
5. Absolument positionnés elements : Les éléments avec la position "absolue" sont peints dans l'ordre arborescent après le flux normal, les flotteurs et les éléments positionnés.

Par défaut, un élément sans aucune position explicite spécifiée (telle que "position :static" ou "position:absolute") est considéré comme "in-flow" et sera peint lors de l'étape 4. Cependant, si le conteneur parent de cet élément reçoit "position:relative", il deviendra un élément positionné et sera être peint lors de l'étape 3.

Dans l'exemple donné, si l'élément ".container" n'a pas "position:relative", alors l'élément ".mask", qui a "position:absolute", sera être peint dessus lors de l'étape 5 (après avoir positionné les éléments). Cependant, lorsque « position:relative » est appliqué au « .container », il devient un élément positionné et est donc peint lors de l'étape 3. En tant que tel, le « .container », ainsi que ses enfants, seront peints avant le « .container ». .mask", ce qui fait apparaître la superposition bleue sous le texte.

Il est important de noter que l'ordre dans lequel les éléments sont peints dans le DOM (Document Object Model) ne correspond pas nécessairement à l'ordre dans lequel ils apparaissent visuellement. Les valeurs z-index spécifiées sont prioritaires pour déterminer quel élément apparaît en haut. Cependant, si aucun z-index n'est spécifié, l'ordre de peinture décrit ci-dessus sera utilisé.

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!