Maison > interface Web > tutoriel CSS > Pourquoi « clip-path » modifie-t-il l'ordre d'empilement des éléments HTML ?

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

Susan Sarandon
Libérer: 2024-11-26 02:45:18
original
331 Les gens l'ont consulté

Why Does `clip-path` Change the Stacking Order of HTML Elements?

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%);
}
Copier après la connexion

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.
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal