Warum funktioniert „z-index' nicht, wenn „transform' verwendet wird?-CSS-Tutorial-php.cn

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!

Quelle：php.cn

Vorheriger Artikel：Wie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung? Nächster Artikel：Wie kann ich die erste Zeile und Spalte einer scrollbaren Tabelle mit JavaScript reparieren?

Erklärung dieser Website

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

Neueste Artikel des Autors