translate與絕對定位 相對定位的區別

在表現上看，使用css3 translate函式和絕對定位、相對定位屬性加上top、left數值都可以使元素產生位移。實際上它們還是有不少的區別。

我們分別用相對定位和translate的方法來使元素產生位移：

1.使用相對定位使元素產生位移

*

#box1

*

#box2

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

而使用相對定位的例子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 的相關屬性。

translate 與 相對 絕對定位

垂直水平居中是日常前端開發當中乙個常見的需求，在支援 css3 屬性的現代瀏覽器當中，有乙個利用 css3 屬性的垂直水平居中方法 position absolute translate translate translate translate 例子傳送門 請用現代瀏覽器開啟 從上面的例子看到，無...

定位 絕對定位 相對定位

定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後，可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...

CSS定位，相對定位，絕對定位

position relative 表示相對定位。對乙個元素進行相對定位，即指通過設定垂直或水平位置，讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px，那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素，那麼會在元素左邊建立30畫素的空間，也就是將元素向右移動，如...