IOS中z-index属性失效问题

在一次用h5页面功能中，ios系统发生如下bug问题整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部区域的z-index=3，按道理讲，全部区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。

  • Huawei
  • 发布：2022-01-12
  • 3096次
  • IOS中z-index

  • 首先，排除了浮动等会导致出现这个问题的情况。后网上百度了下，说是 从父原则 但是我按照这篇文章的说法修改样式js还是无效。因为是z-index属性失效导致了该问题，如下是正确解决了我此时的问题的方法


    方法一：


    页面上加上 iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致苹果上z-index属性失效，安卓正常


    将弹性滑动属性的css全局样式-webkit-overflow-scrolling: touch去掉后z-index属性正常。


    方法二：写js弹窗出现时，隐藏上层层级的div【底部菜单】;弹窗取消时，显示上层层级的div【底部菜单】


    解决方法：在页面中直接-webkit-overflow-scrolling: unset样式覆盖


    ————————————————

    版权声明：本文为CSDN博主「zilvzsy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

    原文链接：https://blog.csdn.net/zilvzsy/article/details/86022612