Heim > Artikel > Web-Frontend > Warum funktioniert „z-index“ nicht, wenn „transform“ verwendet wird?

Warum funktioniert „z-index“ nicht, wenn „transform“ verwendet wird?

DDDOriginal: 2024-11-01 15:30:04684Durchsuche

Why Doesn't `z-index` Work When Using `transform`?

z-index funktioniert nicht: Positionierungsprobleme verstehen und lösen

Beim Arbeiten mit mehreren positionierten Elementen Bei Verwendung von Z-Index kann es zu Situationen kommen, in denen die erwartete Schichtung nicht auftritt. Ein solches Problem tritt auf, wenn versucht wird, ein Element hinter einem anderen zu platzieren, das mithilfe des Z-Index positioniert wurde.

Im bereitgestellten Code werden zwei Ringe erstellt: der erste, der oben auf dem Kreis positioniert ist ohne die Spitze und die zweite hinter dem Kreis. Letzteres bleibt trotz eines Z-Index-Werts von -3 aufgrund der darauf angewendeten Transformationseigenschaft vorne.

Die Lösung liegt im Entfernen der Transformationseigenschaft und durch eine Alternative ersetzen. Hier ist der geänderte Code:

:root{ <br> --size:200px;<br>}</p>
<h1>Hintergrund {</h1>
<p>Breite:100 %;<br> Höhe:100 %;<br> Position:absolut;<br> oben: 0; >background #mainplanet {<br><br>width:var(--size);<br> height:var(--size);<br>background:#fff;</p>position:relative;<h1> top:calc(50% - var(--size)/2);</h1> left:calc(50% - var(--size)/2);<p> border-radius:50%;<br> }<br><br>background #mainplanet:before,#background #mainplanet:after{<br><br>content:"";<br> width:calc(var(--size) * 1.5);<br> height:calc(var(--size) / 2);</p> border:30px solid #000;<h1> position:absolute;</h1> top:10px;<p> left:-80px;<br> border-radius:50%;<br> transform: rotateX(66deg) rotateY(170deg);<br>}<br><br>background #mainplanet:before{<br><br>border-top-color:transparent ;<br>}<br></p>Hintergrund #mainplanet:after{<h1></h1>z-index:-3;<p>}

<div id="background"></p> <div id="mainplanet"><h1> </div></h1></div&gt ;

Mit dieser Änderung ist der zweite Ring jetzt korrekt hinter dem Kreis positioniert, was die Effektivität der Verwendung des Z-Index zur Manipulation der Objektebene zeigt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „z-index“ nicht, wenn „transform“ verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html Object using class Property var JS console this position border background transform issue

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

Vorheriger Artikel：Wie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?Nächster Artikel：Wie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?

In Verbindung stehende Artikel

Mehr sehen