Pourquoi Clip-Path affecte-t-il l'ordre d'empilement des éléments ?

Pourquoi l'ordre d'empilement change avec le chemin de détourage

Lorsqu'un chemin de détourage est appliqué à un élément, cela crée un nouveau contexte d'empilement, similaire à la façon dont l'opacité affecte l'ordre d'empilement avec valeurs inférieures à 1. Ceci est spécifié dans la spécification CSS, qui stipule qu'« Une valeur calculée autre que nulle entraîne la création d'un contexte d'empilement de la même manière que CSS l'opacité le fait pour les valeurs autres que 1."

L'ordre d'empilement est déterminé lors de la peinture. Les étapes suivantes se déroulent dans l'ordre :

1. Les éléments avec une position, une opacité inférieure à 1 ou une transformation autre qu'aucune créent un nouveau contexte d'empilement.
2. Descendants positionnés avec z-index : auto ou z-index : 0 sont placés dans le contexte d'empilement parent.
3. Les descendants entrants et non positionnés sont placés dans le contexte d'empilement parent. contexte d'empilement.

Dans l'exemple fourni, l'élément avec clip-path est peint à l'étape 1 et crée un nouveau contexte d'empilement. L'élément image, qui n'a aucune position définie, sera peint à l'étape 3, après le contexte d'empilement créé par l'élément clip-path.

C'est pourquoi l'image apparaît sous l'en-tête, même si elle apparaît plus tard dans le code DOM.

Solution :

Pour résoudre ce problème, vous pouvez définir position: relative sur l'élément image. Cela le positionnera par rapport à sa position normale, et il sera donc inséré dans le contexte d'empilement créé par l'élément clip-path à l'étape 1. En conséquence, l'image apparaîtra au-dessus de l'élément d'en-tête.

Exemple d'opacité :

Le même comportement peut être observé avec l'opacité. Si l'élément d'en-tête a une opacité inférieure à 1, il créera également un nouveau contexte d'empilement et l'image apparaîtra en dessous sans propriété de position.

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!