为什么使用“transform”时“z-index”不起作用？
- DDD原创
- 2024-11-01 15:30:04684浏览
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>宽度:var(--size);<br>高度:var(--size);<br>背景:#fff;<br>位置:相对;<br>顶部：calc(50% - var(--size)/2);<br> 左：calc(50% - var(--size)/2);<br> 边框半径：50%;<br> }</p><h1>背景 #mainplanet:之前,#background #mainplanet:之后{</h1><p>内容:"";<br>宽度:calc(var(--size) * 1.5);<br> 高度:calc(var(--size) / 2);<br> 边框:30pxsolid #000;<br> 位置:绝对;<br> 顶部:10px;<br> 左:-80px;<br>边框半径:50%;<br>变换:rotateX(66deg)rotateY(170deg);<br>}</p><h1>背景#mainplanet:之前{</h1><p>边框顶部颜色:透明;<br>}</p><h1>背景 #mainplanet:after{</h1><p>z-index:-3;<br>}<div id="background"><br> <div id="mainplanet"><br> </div><br></div> ;
通过此修改，第二个环现在正确位于圆圈后面，展示了使用 z-index 操作对象分层的有效性。
以上是为什么使用“transform”时“z-index”不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn