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

喜欢ヅ旅行 2023-10-15 20:14 20阅读 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 条评论，20人围观）

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

相关阅读

相关 MySQL高负载环境下，索引失效带来的问题分析

在MySQL的高负载环境下，如果出现了索引失效的问题，可能会对系统的性能和数据查询效率产生以下影响： 1. 查询速度下降：没有索引，数据库需要遍历表中的每一行来查找符合条件的

亦凉/ 2024年12月20日 23:27/ 0 赞/ 7 阅读

相关 android 解决selector失效问题

android里面 selector用于按钮的背景状态切换，很多年前似乎也遇到过这个失效的坑，当时没记录，百度半天也没找到解决答案，最后弄了很久找到了问题所在，这里记录下...

偏执的太偏执、/ 2024年04月17日 06:18/ 0 赞/ 65 阅读

相关如何解决缓存失效问题。

失效采用主动失效与被动失效相结合的方式。被动失效被动失效主要处理如模板变更和一些对时效性不是太敏感的数据的失效，采用设置Cache时间长度这种自动失效的方式，同时也

一时失言乱红尘/ 2024年02月18日 23:12/ 0 赞/ 62 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关解决Fixed布局失效的问题

解决transform导致的Fixed布局失效的问题 1. 问题描述当父元素存在css3的`transform`属性时，会导致子元素的`fixed`布局失

╰半橙微兮°/ 2022年01月31日 12:53/ 0 赞/ 981 阅读

相关解决Springboot @Transactional失效问题

引言对于追求数据强一致性的系统，事务扮演者十分重要的角色.最近在项目中遇到一个事务失效的问题，在此分享给大家。情景回放 Cause: com.mys

Myth丶恋晨/ 2022年01月28日 09:17/ 0 赞/ 527 阅读

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

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

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