江苏龙网

  1. 首页 > 生活 > >

移动端webapp开发transform属性影响position:fixed的纠结问题！！！

这种具体到某个特性或者bug的问题，最好的寻找答案的方式是在stackoverflow搜索下。比如你这个问题：http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform
■网友
规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素。
■网友
直接把fixed写在body上就可以了
■网友
因为fixed元素是漂浮元素，从父原则，建议用absolute试试看
■网友
感觉你布局不是很合理，既然fix是基于屏幕定位的，那何必要把他放到他的父级中呢比如你这个\u0026lt;div class="wrap"\u0026gt; \u0026lt;div class="fix"\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;div class="page"\u0026gt; \u0026lt;div class="content"\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;然后3d位移加到page上，你觉得这样是不是合理点
■网友
我也碰到过，如果你仅仅是利用translate3d来开启GPU加速的话，可以使用translateZ代替一下试试
■网友
直接写在 BODY里,或者用JS把他放入body里


    推荐阅读


    上一篇：为啥双卡双待的手机如此有市场?

    下一篇：放弃硬件工程师的工作是不是很任性