translate和position的比较

　　有很多css属性可以影响元素定位，比如float,margin,padding,position,translate()。表面上来看，position:relatative和transform:translate()似乎作用一致，但其实他们之间也有几个差别，本篇文章就将比较这两个属性。

1.浏览器支持情况

　　position是css2的属性，transform是css3的属性，在ie8及以下的浏览器是不支持2d transform的。

2.GPU加速

　　transform属性可以使用硬件加速，这就使得当元素变换或者动画时，translate()性能表现要优于position的。

　　关于硬件加速原理，可以看我之前的总结文章 http://www.cnblogs.com/shytong/p/5419565.html

3.百分数的基准不同

　　当属性值是百分数时，translateX和translateY分别以自身宽高为标准，而当应用position时，left/top中的百分数是以最近定位父元素的宽高为标准的。

　　当我们未知宽高元素水平垂直居中时，我们可以使用决定定位加translate(-50%,-50%)。

转载于:https://www.cnblogs.com/shytong/p/5654142.html