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

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

2012-04-04 08:00
by chaonextdoor

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

2012-04-04 08:07
by fcalderan

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 - chaonextdoor 2012-04-04 08:22

@chaonextdoor , see my example fiddle: http://jsfiddle.net/LkLey - fcalderan 2012-04-04 08:31

@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 - BoltClock 2012-04-04 08:35

It looks like translate() will in fact alter an element's offsetTop and offsetLeft properties now. I wonder when that changed.. - BoltClock 2015-01-22 18:08

What? In which browser have you seen this - fcalderan 2015-01-22 19:48