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

Question

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

Answer 1

From a page layout perspective

transform and position:relative have the same effect.

The difference is that transform can simply act on the position:absolute element, while position:relative; requires additional html

---

From an animation perspective

There is a big difference when using transform or position to achieve animation effects.

When using transform, the GPU can be involved in the calculation, and the FPS of the animation will be higher.

When using position, the smallest unit of animation change is 1px, and when using transform to participate, it can be smaller (the animation effect is smoother)

Reference materials: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

by Paul Irish

---

Summary

• Position is born for page layout.
• transform is made for animation.

Answer 2

The functions are the same. But translate will not cause the browser to redraw or reflow, which is quite nice.