CSS3 translate方法和CSS2相对定位有什么区别？ [英] What's the difference between CSS3 translate method and CSS2 relative positioning?

问题描述

似乎两者都可以使元素从当前位置移动。这两种方法是否可以互换？

解决方案

这两种方法不完全一样：翻译元素不需要更改顶部，左，右或 bottom CSS属性，所以以同样的方式 offsetTop / offseLeft JavaScript属性不会随CSS翻译更改。除此之外，元素的位置也可以是 static （因此不需要 z-index ）

如果您使用 position：relative ，您将更改这些属性以在视觉上实现相同的效果。

示例小提琴： http://jsfiddle.net/LkLey/

当然，如果你必须处理旧的浏览器（如 IE8 或 FF2 ）必要的选择是相对定位，否则我不能看到一个明确的方便选择两种方法之一（嗯，说实话相对定位不需要多个前缀 - moz - ， -webkit - ...无处不在），所以选择取决于你（并且它取决于布局） / p>


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

解决方案

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

这篇关于CSS3 translate方法和CSS2相对定位有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！