admin管理员组文章数量:1610837
最近在项目开发过程中遇到了一个固定定位失效的问题,当给一个元素设置了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/wordpress/2015/05/css3-transform-affect/
至于移动端设置-webkit-overflow-scrolling属性产生的失效问题,网上查找一番资料之后并未发现太多良好的解决方案,一般情况都是选择规避这个问题。这里引用一下其他作者总结的一段话:
‘solution:那时候在外网找了很久资料一一实验,最后同意了一些开发者的看法:解决这个问题的最好方法就是规避这个问题,即不要在设置了-webkit-overflow-scrolling:touch的容器上定位元素。后来两度与几个公司的前端交流,mobile上苹果尽量少用fixed,要用的话往往也使用一些hack技巧’。引用这段的参考地址:https://blog.csdn/weixin_36094484/article/details/80955971
版权声明:本文标题:position fixed 固定定位失效问题及解决方案 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728606631a1165537.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论