3d变换导致z-index在safria浏览器上失效的问题

由于我们公司的编辑人员发现他们编辑的文章分享到微信浏览器之后,和我在页面顶部添加的固定定位的引导下载的导航条样式之间产生了冲突,他们编辑的一部分内容可以直接覆盖在我的导航条上,要知道我的导航条已经将层级设置到了9999了,所以肯定不是层级低的原因,经过在网上查询发现可能是覆盖在我的导航条上的内容块运用了css3 3d属性,后来验证发现,这个section确实存在一个tranform:translateZ(10px)属性。这就是safria让我设置的z-index失效的原因。那么这个问题怎么解决呢?经过翻阅网上资料找到两个比较好的解决办法。
方法1:
父级,任意父级,非body级别,设置overflow:hidden可恢复和其他浏览器一样的渲染。

方法2:
以毒攻毒。有时候,页面复杂,我们不能给父级设置overflow:hidden,怎么办呢?答案就是,给需要前置显示也就是层级高的那个也设置transform:translateZ()这个属性;,当然,这个translateZ()中的数字最好比层级不高的那个translateZ()的大,具体多少,可以尝试下使用1000px,比较保险。

有时候,只使用第一种方法不顶用,那就两种方法都用上,反正这两个也没啥冲突,保你药到病除。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值