Pourquoi « clip-path » modifie-t-il l'ordre d'empilement des éléments HTML ?

Pourquoi Clip-Path modifie l'ordre d'empilement : une plongée plus approfondie

Dans le monde du CSS, nous traitons souvent de l'ordre d'empilement des éléments , où les éléments positionnés plus haut dans le code sont généralement dessinés au-dessus de ceux positionnés en dessous. Cependant, certaines propriétés, telles que clip-path, peuvent perturber cet ordre d'empilement attendu, conduisant à des résultats inattendus.

Considérez le code CSS suivant :

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

Lorsqu'il est appliqué à un en-tête (

), ce code définit une forme personnalisée à l'aide du chemin de détourage. Cependant, si une image est positionnée en dessous de cette rubrique, on rencontre un comportement inattendu. L'image, qui devrait apparaître visuellement au-dessus de l'en-tête en raison de sa position ultérieure dans le code, se retrouve en dessous.

Pour comprendre ce comportement, nous devons comprendre que le chemin du clip, similaire à l'opacité CSS, établit un nouveau contexte d'empilement. Dans l'ordre de peinture défini par CSS, les éléments créant des contextes d'empilement sont positionnés avant les éléments non positionnés.

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

 - All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
 - All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.
 - All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

Dans notre exemple, l'élément avec la propriété clip-path est peint à l'étape 8, tandis que l'image , dépourvue de tout positionnement, est peinte à l'étape 4. Bien qu'elle apparaisse plus tard dans le code, l'image est peinte avant l'en-tête découpé en raison du contexte d'empilement créé par clip-path.

Pour Pour remédier à cela, on peut définir explicitement position:relative sur l'image. Cela positionne l'image, la plaçant dans le même contexte d'empilement que l'en-tête découpé. L'ordre de l'arborescence détermine ensuite que l'image est rendue au-dessus de l'en-tête.

img {
  margin-top: -10em;
  position:relative;
}

En conclusion, le chemin du clip, comme l'opacité CSS, établit un contexte d'empilement, affectant l'ordre de peinture des éléments. En comprenant ces concepts, nous pouvons contrôler le comportement d'empilement et obtenir les résultats visuels souhaité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!