translate与绝对定位、相对定位的区别

在表现上看，使用 CSS3 translate 函数和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移。实际上它们还是有不少的区别。

一：元素视图属性中的 offsetLeft 和 offsetTop 属性。

我们分别用相对定位和 translate 的方法来使元素产生位移：
1.使用相对定位使元素产生位移

	*{
		margin:0;
		padding:0;
	}
    #box1 {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: blue;
        top: 100px;
        left: 300px;
   }

2.使用translate使元素产生位移

	*{
		margin:0;
		padding:0;
	}
   #box2 {
       width: 50px;
       height: 50px;
       background-color: red;
       -ms-transform: translate(300px,100px);
       -moz-transform: translate(300px,100px);
       -o-transform: translate(300px,100px);
       transform: translate(300px,100px);
   }

然后看看两者的 offsetTop 和 offsetLeft 的数值：

        var box1Left = document.getElementById("box1").offsetLeft;
        var box1Top = document.getElementById("box1").offsetTop;
        console.log(box1Left);//300
        console.log(box1Top);//100

        var box2Left = document.getElementById("box2").offsetLeft;
        var box2Top = document.getElementById("box2").offsetTop;
        console.log(box2Left);//0
        console.log(box2Top);//0

可以看出使用 translate 的例子的 offsetTop 和 offsetLeft 的数值与没有产生位移的元素没有区别，无论位移多少这两个数值都是固定不变的。

而使用相对定位的例子 offsetTop 和 offsetLeft 的数值则根据位移的长度发生了改变。

二、动画表现的区别

在 CSS3 属性还没很好地被浏览器支持的时候，我们常常会使用绝对定位(position:absolute)，然后结合 jQuery 改变元素的 top、left 的数值来做位移的动画效果。

然而，两者在位移动画的表现上也有一定的区别。借用国外博主 Paul Irish 的两个例子：
Animating with Top/Left
Animating with Translate

对比两个例子来看，可以看出使用 translate 来制作的动画比绝对定位的动画更加平滑。

原因在于使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移，而使用 translate 函数的动画则可以不受像素的影响，以更小的单位进行位移。

另外，绝对定位的动画效果完全使用 CPU 进行计算，而使用 translate 函数的动画则是利用 GPU，因此在视觉上使用 translate 函数的动画可以有比绝对定位动画有更高的帧数。

三、最后

CSS3 动画相关的属性出现以后，可以让我们更加轻松地制作复杂的动画，同时 position:relative 和 position:absolute 这一类的属性可以回归它们原本的定位，为定位、布局服务，而将动画的重任交给 CSS3 的相关属性。