為什麼使用“transform”時“z-index”不起作用？

z-index 不起作用：理解並解決定位問題

處理多個定位元素時使用z-index，可能會遇到預期分層未發生的情況。當嘗試將一個元素放置在另一個使用 z-index 定位的元素後面時，就會出現這樣的問題。

在提供的程式碼中，創建了兩個環：第一個位於圓的頂部沒有頂部，第二個位於圓圈後面。儘管後者的 z-index 值為 -3，但由於對其應用了變換屬性，它仍然位於前面。

解決方案在於刪除變換屬性並用替代品取代它。修改後的程式碼如下：

:root{ <br> --size :200px;<br>}</p><h1>背景{</h1><p>寬度:100%;<br>高度:100%;<br>位置:絕對;<br>頂部:0;<br> 左:0;<br> 背景: 線性漸變(-23.5deg, #000033, #00001a);<br> z 索引:-2;<br>}</p><h1>背景#mainplanet {</h1>}<p><br>背景#mainplanet {<br>}<br><br>背景#mainplanet {<> <br>寬度:var(--size);<br>高度:var(--size);<br>背景:#fff;</p>位置:相對;<h1>頂部：calc(50% - var (--size)/2);</h1> 左：calc(50% - var(--size)/2);<p> 邊框半徑：50%;<br> }<br><br>背景# mainplanet:之前,#background #mainplanet:之後{<br><br>內容:"";<br>寬度:calc(var(--size) * 1.5);<br> 高度:calc(var(-- size) / 2);<br> 邊框:30pxsolid #000;<br> 位置:絕對;</p> 頂部:10px;<h1> 左:-80px;</h1>邊框半徑變換:50%;< :rotateX(66deg)rotateY(170deg);<p>}<br></p>背景#mainplanet:之前{<h1></h1>邊框頂部顏色:透明;<p>}<br><br>邊框頂部顏色:透明;<#>}<br><br>背景。 mainplanet:after{<br></p>z-index:-3;<p>}

<div id= "background">​​<🎜> <div id="mainplanet"><🎜> </div><🎜></div&gt ;

透過此修改，第二個環現在正確位於圓圈後面，展示了使用z-index 操作物件分層的有效性。

以上是為什麼使用“transform”時“z-index”不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！