Question

如果我的问题与论坛无关，我将从道歉开始。

我正在建立一个网站，我完全是自学成才，并且只在短时间内完成。

我有点害怕我在定位物体方面做错了。

我一直在使用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 */

是否有人能够对位置和变换之间的区别有所了解？

我看过google但是找不到任何可以解释何时应该使用的内容以及何时使用其他内容。

提前致谢

Answer 1

转换属性更适用于需要操作对象（如div）的页面。例如，如果要旋转div，则使用transform:rotate(degrees)，因为CSS3网站在此处显示：CSS3 play rotation example。此外，变换允许您移动元素并按照其解释here进行缩放。相反，position更加静态意味着您可以选择将元素放在网页中的位置。例如，如果您尝试将div放在另一个div中而不是使用

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

然后，要定位与浏览器的正常边界相关的元素，您将使用

position: fixed;

等等。显示不同类型的职位here。

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

变换与位置的区别

1 个答案: