移动端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里


    推荐阅读