html5 - CSS中translate和position: relative设置的偏移有什么区别？

Question

position: relative;也是相对自己当前位置。 transform: translate(x,y);也是相对于当前位置偏移吧？ 有什么区别呢？

Answer 1

從頁麵布局的角度看

transform 和 position:relative 的效果是一樣的。

差別在於，transform 可以簡單地作用於 position:absolute 的元素上麵，而 position:relative; 還得加額外的 html

---

從動畫角度來說

使用 transform 或 position 實現動畫效果時是有很大差別。

使用 transform 時，可以讓 GPU 參與運算，動畫的 FPS 更高。

使用 position 時，最小的動畫變化的單位是 1px，而使用 transform 參與時，可以做到更小（動畫效果更加平滑）

參考資料： Paul Irish 的 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

---

總結

• position 是為頁麵布局而生的。
• transform 是為動畫而生的。

Answer 2

功能都一樣。但是translate不會引起瀏覽器的重繪和重排，這就相當nice了。