变换之间的区别：翻译和位置：相对；？答案

【问题标题】：Difference between transform: translate and position:relative;?变换之间的区别：翻译和位置：相对；？
【发布时间】：2015-01-23 01:51:32
【问题描述】：

正如标题所说，transform: translate(x, y) 和 position: relative 有什么区别。

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

我阅读了一篇关于使用“transform: translate;”使元素居中的文章也就是说，由于 GPU 和优化原因，最好使用“转换”，但我并没有真正看到问题，因为如果你只是重新定位元素而不是动画它，这并不是什么大问题。

那么最后，它们有什么不同以及在哪些方面？

【问题讨论】：

某物是否具有位置：绝对，您仍然可以对其使用变换，但不能在同一元素上使用相对位置。
对不起，我指的是“transform: translate;”之间的重新定位差异和“position:absolute;”，如果我没有说清楚，我很抱歉。
还有CSS-Tricks Article，其中包括指向Paul Irish Article的链接
正如我所说，当你使用它们时会有所不同。您不能使用 position:relative 来影响具有绝对位置的元素......但是您可以使用 translate。所以，也许是它的用法使它们与众不同。
我不会认为这个问题“太宽泛”，因为 OP 明确指出问题是关于 translate() 与相对定位，以实现将元素从原始位置转移的非常具体的目的。对你们中的一些人来说，这还不够缩小吗？

【解决方案1】：

基本上translate 依赖于CSS3 2D Transforms，而position 属性是CSS2 level。

在支持的浏览器中，据说使用translate 会提升浏览器的整个图形性能，

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

所以如果你想给广泛的浏览器支持 CSS2 位置肯定更好，

而transform:translate() 是未来。

【讨论】：

这几乎肯定不是主要区别。这是两个完全不同的东西，用于完全不同的目的。
这些只是背景信息，考虑到只是移动一个 2d 元素，你不认为它们可以达到同样的目的吗？当然 Chris Coyier 和 Paul Irish 的研究类型更深（Paulie_D 评论链接在上面）
@BoltClock 需要解释一下吗？
来吧，这个答案来自 2015 年。转换不是未来，而是现在。任何不支持它的浏览器都是过去的。