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?

Lunette

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).

Merna

Sorry, I'm a little bit confused. How come the top, left, right or bottom CSS properties don't chage? I mean all of these properties set the corresponding edge of an element to a unit to the left/right/up/down to its normal position.So if you use translate method to move an element away from its normal position, they should change according to my understanding. – Lunette

@chaonextdoor: Transforms work rather differently from your regular relative positioning. If you had a 3D transform, for example, how should an element's offsets be computed? – Katheykathi

It looks like translate() will in fact alter an element's offsetTop and offsetLeft properties now. I wonder when that changed... – Katheykathi

What? In which browser have you seen this? – Merna