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

z-index Not Working: Understanding and Resolving Positioning Issues

When working with multiple elements positioned using z-index, it's possible to encounter situations where the expected layering doesn't occur. One such issue arises when attempting to place an element behind another that has been positioned using z-index.

In the provided code, two rings are created: the first, positioned on top of the circle without the top, and the second, behind the circle. The latter, despite having a z-index value of -3, remains in front due to the transform property applied to it.

The solution lies in removing the transform property and replacing it with an alternative. Here's the modified code:

:root{<br>  --size:200px;<br>}</p><h1 id="background">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 id="background-mainplanet">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 id="background-mainplanet-before-background-mainplanet-after">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 id="background-mainplanet-before">background #mainplanet:before{</h1><p>border-top-color:transparent;<br>}</p><h1 id="background-mainplanet-after">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!