Wie wirkt sich „clip-path' auf die Stapelreihenfolge von Elementen in CSS aus?

Wie sich Clip-Path auf die Stapelreihenfolge von Elementen im DOM auswirkt

Clip-path ist eine CSS-Eigenschaft, die einen Beschneidungsbereich erstellt, Definieren, welche Teile des Inhalts eines Elements sichtbar sind. Es hat jedoch eine unerwartete Auswirkung auf die Stapelreihenfolge, da Elemente später im DOM unter denen mit Clip-Pfad platziert werden.

Ursache des Problems

Dies geschieht, weil Gemäß der CSS-Spezifikation wird durch die Verwendung von Clip-Pfad-Werten ungleich Null ein Stapelkontext erstellt. Ein Stapelkontext ist ein dreidimensionaler Raum, in dem Elemente entsprechend ihrem Z-Index gerendert und geschichtet werden.

Im Fall von Clip-Pfad wird das Element mit dem Clip-Pfad in einem neuen Stapelkontext platziert und nachfolgende Elemente ohne explizite Positionierung werden im ursprünglichen Stapelkontext gerendert. Das bedeutet, dass Elemente mit Clip-Pfad Elemente ohne explizite Positionierung überlappen, selbst wenn sie später im DOM erscheinen.

Beheben des Problems

Um dieses Problem zu beheben, müssen Sie kann die Position des Elements mit Clip-Pfad explizit auf „relativ“ oder „absolut“ festlegen, wodurch es in den neuen Stapelkontext verschoben wird, der durch den Clip-Pfad erstellt wird. Dadurch wird sichergestellt, dass Elemente später im DOM über dem Element mit dem Clip-Pfad bleiben.

Beispiel

Beachten Sie den folgenden CSS-Code:

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;
}

Anfangs ist das Bild aufgrund des Clip-Pfads in der Kopfzeile hinter der Kopfzeile verborgen. Durch die Einstellung „Position: relativ“ für das Bild wird es in denselben Stapelkontext wie die Kopfzeile verschoben und darüber angezeigt:

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

Fazit

Clip verwenden -path erstellt einen Stapelkontext, der die Stapelreihenfolge nachfolgender Elemente beeinflusst. Um eine korrekte Überlagerung sicherzustellen, legen Sie die Position des Elements mit dem Clip-Pfad explizit auf „relativ“ oder „absolut“ fest oder erwägen Sie die Verwendung anderer Techniken, um die Elementüberlappung zu steuern.

Das obige ist der detaillierte Inhalt vonWie wirkt sich „clip-path' auf die Stapelreihenfolge von Elementen in CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!