记笔记,免忘记!ios苹果手机,多个position:fixed导致层级关系失效,弹窗无法显示。怎么调试都无法实现,部分苹果手机不会出现此问题。
首先,排除了浮动等会导致出现这个问题的情况。后网上百度了下,说是 从父原则 但是我按照这篇文章的说法修改样式js还是无效。因为是z-index属性失效导致了该问题,如下是正确解决了我此时的问题的方法
方法一:
页面上加上 iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致苹果上z-index属性失效,安卓正常
将弹性滑动属性的css全局样式-webkit-overflow-scrolling: touch去掉后z-index属性正常。
方法二:写js弹窗出现时,隐藏上层层级的div【底部菜单】;弹窗取消时,显示上层层级的div【底部菜单】