问题
It seems that both of them could make the element move from its current position. Are these two methods interchangeable?
回答1:
The two methods are not exactly the same thing: Translating an element will not require to change its top, left, right or bottom CSS properties, so in the same way offsetTop/offseLeft Javascript properties are not changing with a CSS translation. Beside, the position of the element could be also static (and thus no z-index is required)
If you use position: relative instead, you will change those properties to visually achieve the same effect.
Example Fiddle: http://jsfiddle.net/LkLey/
Of course if you have to deal with old browser (like IE8 or FF2) the necessary choice is relative positioning, otherwise I can't see a clear convenience on choosing one of the two methods (well, to be honest relative positioning has no need of multipe prefixes -moz-, -webkit- ... to work everywhere) so the choice is up to you (and it depends on the layout).
来源：https://stackoverflow.com/questions/10007093/whats-the-difference-between-css3-translate-method-and-css2-relative-positionin