为什么使用'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>宽度: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&gt ;

通过此修改，第二个环现在正确位于圆圈后面，展示了使用 z-index 操作对象分层的有效性。

以上是为什么使用'transform”时'z-index”不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何使用视图封装在 Angular 中设置 InnerHTML 内容的样式？ 下一篇：如何使用 JavaScript 修复可滚动表格的第一行和第一列？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• 检查类型是否满足 Go 中的接口
  2024-11-01 23:13:29
• 如何在 CSS 框中创建斜角？
  2024-11-01 23:12:29
• dlnetst.exe - 什么是 dlnetst.exe？
  2024-11-01 23:11:29
• 为什么 Javascript 的 `atob` 无法正确解码 UTF-8 base64 字符串？
  2024-11-01 23:10:29
• 如何在 C 中将所有文件字节读入字符数组？
  2024-11-01 23:09:31
• 如何在 JavaScript 中从 Base64 解码 UTF-8 字符串？
  2024-11-01 23:08:29
• 如何在 Linux 上将 Java 应用程序作为服务运行？
  2024-11-01 23:07:29
• Discmgru.dll - 什么是 Discmgru.dll？
  2024-11-01 23:06:29
• 如何用不同的颜色突出显示文本区域和输入中的文本？
  2024-11-01 23:05:29
• dkaat94c.dll - 什么是 dkaat94c.dll？
  2024-11-01 23:04:29

最新问题

function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...

来自于 2024-04-29 11:01:01

0

2

1731

google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？

来自于 2024-04-23 00:22:19

0

10

1885

子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应

来自于 2024-04-19 15:37:47

0

1

1597

父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...

来自于 2024-04-18 23:52:34

0

1

1510

关于CSS思维导图的课件在哪？ 课件

来自于 2024-04-16 10:10:18

0

0

1547

相关专题

更多>

• 迅雷会员补丁
• htmllabel标签怎么用
• 币安怎么注册
• http500解决方法
• 一加质量好还是荣耀质量好
• 文件夹没有安全选项怎么解决
• 十大虚拟币行情最新价格
• 文本框的边框怎么去掉