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