Warum funktioniert mein Z-Index nicht, wenn ich „Transform' verwende?

Z-Index funktioniert nicht

Problem:

Sie versuchen, einen Ring mithilfe von Z hinter einen Kreis zu verschieben. Index, aber trotz der Angabe eines negativen Werts für den Z-Index bleibt der Ring vorne.

Erklärung:

In diesem speziellen Fall haben Sie die Transformation auf angewendet das Pseudoelement für den Ring. Wenn die Transformation angewendet wird, hat die Z-Index-Eigenschaft keine Auswirkung mehr.

Lösung:

Um dieses Problem zu beheben, müssen Sie die Transformationseigenschaft entfernen und ersetzen es mit einer alternativen Methode zum Positionieren des Rings hinter dem Kreis.

Code-Snippet:

Entfernen Sie die Transformationseigenschaft und geben Sie die absolute Position für den Ring mit oben und links an Eigenschaften:

<code class="css">#background #mainplanet:after {
  z-index: -3;
  top: calc(50% - var(--size)/2) !important;
  left: calc(50% - (var(--size) * 1.5)/2) !important;
}</code>

Dadurch wird sichergestellt, dass der Ring hinter dem Kreis positioniert ist und der Z-Index wirksam ist.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Z-Index nicht, wenn ich „Transform' verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!