position fixed 固定定位失效问题及解决方案

最近在项目开发过程中遇到了一个固定定位失效的问题,当给一个元素设置了position: fixed并设置了距离top和left的距离之后发现位置居然一直不正确,fix固定定位失效了。

由于出现这个bug的地方使用了better-scroll, 初步猜想失效的原因可能是使用的better-scroll.js插件, 后来在网上查找了一番,发现原来使用isscroll.js滚动库以及在移动端设置-webkit-overflow-scrolling属性时也会出现同样的问题。

前两种情况下,fixed失效的原因是使用的插件时给该元素的父级元素设置了transform: translate(0, 0)属性,该属性设置之后,子元素固定定位失效。

失效的解决办法是:对父级元素设置transform: none; 或者display:inline

 

更多transform对普通元素 的渲染影响可以参考张鑫旭的文章:

https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/ 

 

至于移动端设置-webkit-overflow-scrolling属性产生的失效问题,网上查找一番资料之后并未发现太多良好的解决方案,一般情况都是选择规避这个问题。这里引用一下其他作者总结的一段话:

‘solution:那时候在外网找了很久资料一一实验,最后同意了一些开发者的看法:解决这个问题的最好方法就是规避这个问题,即不要在设置了-webkit-overflow-scrolling:touch的容器上定位元素。后来两度与几个公司的前端交流,mobile上苹果尽量少用fixed,要用的话往往也使用一些hack技巧’。引用这段的参考地址:https://blog.csdn.net/weixin_36094484/article/details/80955971 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值