IOS下使用定位的子元素,不能覆盖使用定位的父元素平级元素;

在iOS设备上,当为父元素设置 `-webkit-overflow-scrolling: touch` 以实现流畅滚动时,可能会导致定位的子元素无法覆盖父元素的平级定位元素。该问题与`z-index`无关。解决方案包括移除该属性、调整布局结构、挂载元素到更高层级或动态控制属性值。
摘要由CSDN通过智能技术生成

IOS下使用定位的子元素,不能覆盖使用定位的父元素或父元素平级元素;

布局如下,由于业务需要,针对ios页面滑动卡顿问题,添加了css 属性-webkit-overflow-scrolling:touch 使页面滑动流畅,

-webkit-overflow-scrolling这个属性可以参考下面的文章:

https://www.cnblogs.com/xiahj/p/8036419.html

如上图所示,在实际业务中,由于对父容器使用了-webkit-overflow-scrolling:touch这个属性,在某些ios机型下,会出现定位的子元素无法覆盖父元素平级的定位元素的现象,也就是无论A元素使用多高的z-index.在显示的时候,仍然被B元素覆盖在下面。

经过查阅发现-webkit-overflow-scrolling:touch是会影响ios下父子定位元素的显示的。而使用-webkit-overflow-scrolling: auto就不会出现这样的问题

【解决方案】

第一种:直接去掉-webkit-overflow-scrolling: touch 【不合理,因为页面卡顿了】

第二种:把A元素和B元素放到一个平级下,就不会被覆盖,但是某些场景下是不适合的,比如需要从父元素传数据到子元素</

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值