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