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

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

<div id="background"><br>  <div id="mainplanet"><br>  </div><br></div>

With this modification, the second ring is now correctly positioned behind the circle, showcasing the effectiveness of using z-index to manipulate object layering.

The above is the detailed content of Why Doesn\'t `z-index` Work When Using `transform`?. For more information, please follow other related articles on the PHP Chinese website!