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定位的元素单提出去!

posted @ 2013-07-19 15:32  前端记录文档  阅读(418)  评论(0编辑  收藏  举报