fixed 的 定位 与 Transforms

发现的问题或者说现象吧：

当 当前元素设有Transforms  中 translateY等位置变化的属性时，fixed定位失效！

场景提要：

一个页面中，body设置了一个 translateY从20px - 0 的 1s 的运动属性（css3中设置的）这样做， 当页面刷新时或者新进时会有个缓缓运动的效果！

然后页中有个返回顶部的按钮，设的是fixed定位；然后就发现 支持Transforms  属性的浏览器 此按钮呈现的状态是 relative定位的样子，而ie7、8 中按钮的fixed定位是好的！

后来搜索了一下，发现网上以有人发现这个问题并总结了blog 。这是那篇文章的链接http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/；

大概的意思是说，浏览器重新给元素设置了坐标系，将fixed定位强制转为relative定位。

 

然后，回说到我的问题上，我给body加上了Transforms  属性，就是说整个body及其包含的元素都重新设置了坐标系，所以要解决我的问题就是把fixed定位的元素单提出去！

转载于:https://www.cnblogs.com/langli/p/3200654.html