css - What's the difference between CSS3 translate method and CSS2 relative positioning?

Question

It seems that both of them could make the element move from its current position. Are these two methods interchangeable?

Answer 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 affected by 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).