IOS中z-index属性失效问题

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

  • Huawei
  • 发布:2022-01-12
  • 222次
  • 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