最近在項目開發過程中遇到了一個固定定位失效的問題，當給一個元素設置了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