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%)。

posted @ 2016-07-08 17:32  很好玩  阅读(1804)  评论(0编辑  收藏  举报