Heim  >  Artikel  >  Web-Frontend  >  Warum funktioniert Z-Index nicht mit Pseudoelementen mit Transformation?

Warum funktioniert Z-Index nicht mit Pseudoelementen mit Transformation?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 09:43:30806Durchsuche

Why Doesn't Z-Index Work on Pseudo-Elements with Transform?

Z-Index wirkt sich nicht auf den Außenring aus

Beim Versuch, einen Außenring mithilfe von CSS hinter einen Kreis zu verschieben, kann es zu einem Problem kommen Die Z-Index-Eigenschaft scheint unwirksam zu sein. In diesem Fall liegt das Problem darin, dass die Transformationseigenschaft auf die Pseudoelemente angewendet wird.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  transform: rotateX(66deg) rotateY(170deg);
}</code>

Um dieses Problem zu beheben, müssen Sie die Transformationseigenschaft entfernen und sie durch alternative Positionierungsmethoden, wie z. B. Anpassen, ersetzen B. die oberen und linken Koordinaten oder die Verwendung der absoluten Positionierung mit berechneten Werten.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  top: calc(10px - var(--size) / 4);
  left: calc(-80px - var(--size) / 4);
}</code>

Durch diese Änderungen sollten Sie die Kontrolle über die Z-Index-Eigenschaft wiedererlangen und in der Lage sein, das Pseudoelement effektiv hinter den Kreis zu verschieben wie beabsichtigt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Z-Index nicht mit Pseudoelementen mit Transformation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn