转换：翻译和位置：相对；之间的区别？ [英] Difference between transform: translate and position:relative;?

问题描述

正如标题所述，transform：translate（x，y）和position：relative之间有什么区别。

由于它们都完成相同的事情（位置元素），那么它们在用途和用途上有何不同？

我读了一篇有关使用转换：翻译；将元素居中的文章。那说由于GPU和优化的原因，最好使用变换，但是我并没有真正看到问题，因为如果您只是重新定位元素而不是对其进行动画处理，那么这并不是什么大问题。 p>

那么，它们到底有什么不同，又有什么不同？

解决方案

基本上翻译依赖 CSS3 2D转换，而 position 属性是 CSS2级别。

在支持该功能的浏览器中，据说使用 translate 将提高浏览器的整体图形性能，

但并非所有浏览器都支持它，

因此，如果您希望提供广泛的浏览器支持，那么CSS2的位置肯定会更好，

而 transform：translate（）是未来。

As the title says, what are the differences between transform: translate(x, y) and position: relative.

Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application?

I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not animating it.

So in the end, how are they both different and in what ways?

解决方案

Basically translate relies on CSS3 2D Transforms while the position property is a CSS2 level.

In browser that support it has been said that using translate will boost the entire graphical peformance of the browser,

but not all browser do support it,

so if you care to give widespread browser support CSS2 position is surely better,

while transform:translate() is the future.

这篇关于转换：翻译和位置：相对；之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！