Css 变换与位置的区别

如果我的问题与论坛无关，我将首先道歉

我正在建立一个网站，我完全自学，只是做了很短的时间

我有点害怕我在定位物体方面做了一些错误的事情

我一直在用CSS定位，如下所示：

.object{
  position:relative;
  left:100px;
  top:20px;
}

然而，最近我看到一些帖子建议使用：

.object
transform:translate(100px, 20px)

但使用转换后，我看到了其他显然需要添加到不同浏览器条件中的内容，即：

-ms-transform: translate(100px, 20px); /* IE 9 */
-webkit-transform: translate(100px, 20px); /* Safari */

有没有人能解释一下位置和变换之间的区别

我在谷歌上搜索过，但没有找到任何能解释何时应该使用一个和何时应该使用另一个的东西

---

提前感谢

对于需要操作对象（如div）的页面，Transform属性更为具体。例如，如果要旋转div，请使用

Transform:rotate（degrees）

，如CSS3站点所示：。此外，“变换”还允许您移动元素并按说明缩放它们。相反，位置是更静态的，这意味着您可以选择在网页中放置元素的位置。例如，如果您试图将一个div放置在另一个div中，那么您将使用

position: absolute;
left: 20px;
right: 30px;

而要定位与浏览器法线边框相关的元素，您将使用

position: fixed;

等等。显示了不同类型的位置

---

因此，您的代码在这两方面都是正确的，没有区别。您应该根据您想要执行的操作来选择一种方法或另一种方法，因为转换更好地对元素实现不同类型的效果，而位置更好地将元素移动到另一个元素中。

对于需要操作对象（如div）的页面，转换属性更为具体。例如，如果您想旋转一个div，可以使用CSS3站点显示的

transform:rotate（degrees）

。此外，“变换”还允许您移动元素并按说明缩放它们。相反，位置是更静态的，这意味着您可以选择在网页中放置元素的位置。例如，如果您试图将一个div放置在另一个div中，那么您将使用

position: absolute;
left: 20px;
right: 30px;

而要定位与浏览器法线边框相关的元素，您将使用

position: fixed;

等等。显示了不同类型的位置

---

因此，您的代码在这两方面都是正确的，没有区别。你应该根据你想做什么来选择一种方法或另一种方法，因为变换更好地对元素实现不同类型的效果，而位置更好地将元素移动到另一个元素中。

我发现了一些类似的问题和建议。第一个答案回答得不好，第二个答案是+/-谷歌翻译vs位置-有一些好文章解释了使用两者之间的区别-。基本上，translate是css3的方法，只有在制作动画时才应该真正使用，因为它可能会降低动画的帧速率，因为在制作动画时浏览器不必重新绘制它（如果使用position）。如果它是静态的，而不是动画，那么最好还是坚持使用位置。我发现了一些类似的问题。第一个答案回答得不好，第二个答案是+/-谷歌翻译vs位置-有一些好文章解释了使用两者之间的区别-。基本上，translate是css3的方法，只有在制作动画时才应该真正使用，因为它可能会降低动画的帧速率，因为在制作动画时浏览器不必重新绘制它（如果使用position）。如果它是静态的，而不是动画，那么最好坚持使用位置