Difference between transform: translate and position:relative;?

Question

As the title says, what are the differences between transform: translate(x, y) and position: relative.

Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application?

I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not animating it.

So in the end, how are they both different and in what ways?

Answer 1

Basically translate relies on CSS3 2D Transforms while the position property is a CSS2 level.

In browser that support it has been said that using translate will boost the entire graphical peformance of the browser,

but not all browser do support it,

so if you care to give widespread browser support CSS2 position is surely better,

while transform:translate() is the future.