Comment « clip-path » impacte-t-il l'ordre d'empilement des éléments en CSS ?

Comment Clip-Path affecte l'ordre d'empilement des éléments dans le DOM

Clip-path est une propriété CSS qui crée une région de découpage, définir quelles parties du contenu d'un élément sont visibles. Cependant, cela a un effet inattendu sur l'ordre d'empilement, plaçant les éléments plus tard dans le DOM sous ceux avec un chemin de clip.

Cause du problème

Cela se produit parce que , selon la spécification CSS, l'utilisation de valeurs de chemin de clip non nulles crée un contexte d'empilement. Un contexte d'empilement est un espace tridimensionnel où les éléments sont rendus et superposés en fonction de leur z-index.

Dans le cas d'un chemin de clip, l'élément avec le chemin de clip est placé dans un nouveau contexte d'empilement. , et les éléments suivants sans positionnement explicite sont rendus dans le contexte d'empilement d'origine. Cela signifie que les éléments avec un chemin de détourage chevaucheront les éléments sans positionnement explicite même s'ils apparaissent plus tard dans le DOM.

Résoudre le problème

Pour résoudre ce problème, vous peut définir explicitement la position de l'élément avec le chemin du clip sur "relatif" ou "absolu", ce qui le déplace vers le nouveau contexte d'empilement créé par le chemin du clip. Cela garantira que les éléments ultérieurs dans le DOM restent au-dessus de l'élément avec le chemin du clip.

Exemple

Considérez le code CSS suivant :

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

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
}

Initialement, l'image est cachée derrière l'en-tête en raison du chemin de détourage sur l'en-tête. En définissant "position : relative" sur l'image, elle se déplace vers le même contexte d'empilement que l'en-tête et apparaît au-dessus de celle-ci :

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

Conclusion

Utilisation du clip -path crée un contexte d'empilement qui affecte l'ordre d'empilement des éléments suivants. Pour garantir une superposition correcte, définissez explicitement la position de l'élément avec le chemin de détourage sur "relatif" ou "absolu" ou envisagez d'utiliser d'autres techniques pour contrôler le chevauchement des éléments.

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!