解决transform带来的z-index失效问题

喜欢ヅ旅行 2023-10-15 20:14 69阅读 0赞

现象如下：

![3bb0d65ebc334a549924425586efcbb4.png][]

其实下拉列表已经设置了z-index:

![6636dad52dd747d49b5a25ffe0b4441c.png][]

但是为什么z-index没有生效呢。

后来发现原来它的父级元素使用了transform进行垂直方向居中

![6a6a3606173b4638b7a186851b042233.png][]

网上查询了相关资料，说: tranform由于会构造一个新的context层, 然后这个层的z轴优先级会最低巴拉巴拉的，什么的解决办法是通过设置：transform-style:preserve-3d; 和transform:translateZ(xx值);

我试过了，没有作用。

**然后看到一篇文章，说给被遮挡元素的外层容器（也就是父级容器）加上z-index，就可以解决。**

[https://segmentfault.com/q/1010000002480824][https_segmentfault.com_q_1010000002480824]

![b40286b14d124120960f906dd207d00c.png][]

然后试了一下，果然解决了。

![cefd980a59e74f8c81df2e2e4eedc20a.png][]

**总结：解决transform带来的z-index失效问题的办法是给被遮挡元素的父级加上z-index属性**

[3bb0d65ebc334a549924425586efcbb4.png]: https://img-blog.csdnimg.cn/3bb0d65ebc334a549924425586efcbb4.png
[6636dad52dd747d49b5a25ffe0b4441c.png]: https://img-blog.csdnimg.cn/6636dad52dd747d49b5a25ffe0b4441c.png
[6a6a3606173b4638b7a186851b042233.png]: https://img-blog.csdnimg.cn/6a6a3606173b4638b7a186851b042233.png
[https_segmentfault.com_q_1010000002480824]: https://segmentfault.com/q/1010000002480824
[b40286b14d124120960f906dd207d00c.png]: https://img-blog.csdnimg.cn/b40286b14d124120960f906dd207d00c.png
[cefd980a59e74f8c81df2e2e4eedc20a.png]: https://img-blog.csdnimg.cn/cefd980a59e74f8c81df2e2e4eedc20a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL性能杀手：索引失效带来的问题实例

在MySQL中，索引是数据库查询性能的关键因素。如果索引失效，可能会导致以下问题： 1. 查询速度降低：当我们试图通过索引访问数据时，如果没有可用的索引，MySQL将

曾经终败给现在/ 2025年03月04日 03:54/ 0 赞/ 58 阅读

相关 MySQL：索引优化失效带来的问题示例

在MySQL中，索引是优化查询性能的重要工具。然而，如果存在以下情况，索引优化可能失效，引发问题： 1. **数据分布不均**：如果表中的某些列被频繁覆盖（即这些列的

太过爱你忘了你带给我的痛/ 2025年03月01日 23:51/ 0 赞/ 62 阅读

相关如何避免MySQL索引失效带来的问题？

MySQL索引失效可能带来数据查询效率降低、性能下降甚至某些场景下可能导致业务错误。以下是几个避免索引失效的建议： 1. **合理设计表结构**：避免冗余和无意义的数据，这样

清疚/ 2025年02月24日 03:39/ 0 赞/ 84 阅读

相关 MySQL：处理索引失效带来的性能问题

在MySQL中，索引是提高查询效率的重要工具。然而，如果遇到索引失效的情况，可能会导致查询性能下降。以下是处理索引失效带来性能问题的几个步骤： 1. **诊断**：

忘是亡心i/ 2025年02月15日 09:48/ 0 赞/ 54 阅读

相关并发控制失效带来的MySQL事务问题

并发控制失效在MySQL事务处理中通常会导致以下问题： 1. 数据不一致：并发操作可能会同时修改同一数据，如果没有适当的锁机制，就可能导致数据状态的混乱。 2. 死锁：当两

迈不过友情╰/ 2025年01月04日 08:57/ 0 赞/ 77 阅读

相关解决transform带来的z-index失效问题

现象如下： ![3bb0d65ebc334a549924425586efcbb4.png][] 其实下拉列表已经设置了z-index: ![6636dad52dd747d

喜欢ヅ旅行/ 2023年10月15日 20:14/ 0 赞/ 70 阅读

相关【css】transform使fixed定位失效

> `前言` 转载：[https://www.cnblogs.com/norcoA3/p/6492614.html][https_www.cnblogs.com_norcoA

谁践踏了优雅/ 2022年11月20日 08:03/ 0 赞/ 263 阅读

相关图片transform其父级的border-radius失效

最近在做一个项目的时候，遇到这样一个bug! 仔细看图的圆角部分。 ![SouthEast][] 不难发现在中间图片放大的过程里，父级div的border-radiu

以你之姓@/ 2022年07月14日 09:19/ 0 赞/ 107 阅读

相关关于transform导致z-index失效的问题

[https://segmentfault.com/q/1010000002480824][https_segmentfault.com_q_1010000002480824]

淡淡的烟草味﹌/ 2022年05月10日 06:38/ 0 赞/ 268 阅读

相关 react-native布局中的层级问题（zIndex，elevation）

目录关于层级的zIndex/elevation 1、zIndex是rn在0.30开始支持的属性，是可以生效的； 2、shadow

小咪咪/ 2021年11月09日 13:56/ 0 赞/ 524 阅读