欢迎参加我们的ATOZ CSS系列！在本系列中，我将探索不同的CSS值（和属性），每个CSS值（和属性）以不同的字母开始。我们知道有时屏幕截图还不够，因此在本文中，我们添加了有关翻译和位置之间差异的快速提示。
>x用于翻译和位置
>
在这篇文章中，我们将查看这些方法的这些方法之间的许多差异，但首先，让我澄清这些各种属性的作用。
如果我们设置了位置：相对元素，我们可以使用它为>绝对
>内部定位元素创建边界。这可能是对相对定位的更常见的用法，但不是我们在这里讨论的用途。如果我们将位置结合在一起：相对与偏移属性之一的顶部，底部，左或右相对，则元素将从其原始位置移动在布局中，同时保留曾经占用的文档中的空间。该元素将被移至新层，其“图层顺序”或其堆叠顺序可以通过Z-Index属性进行控制。
<span><span>.thing</span> {
</span> <span>position: relative;
</span> <span>top: 100px;
</span> <span>left: 50px;
</span><span>}</span>使用转换时：转换（x，y），我们得到的视觉结果与使用相对位置非常相似。通过以下片段可以实现与上述相同的结果：
在这种情况下，我们将沿X轴和100px沿Y轴翻译该元素的坐标。最终结果在视觉上与以前的位置示例相同。
<span><span>.thing</span> {
</span> <span>transform: translate(50px, 100px);
</span><span>}</span>>
>浏览器支持位置是CSS2属性，而转换是CSS3属性。结果，浏览器支持存在差异，尽管实际上唯一不支持2D变换的浏览器是IE8及以下。 如果您需要支持IE的旧版本，则不是您的转换。
gpu加速度如果您想将元素作为过渡或密钥帧动画的一部分移动，请使用翻译而不是位置（这既适用于绝对和相对定位）。有关此的深度，包括解释和性能分析，请查看Paul Irish的这段视频。
基于百分比的值的行为不同这两种放置元素方法之间的一个主要区别是它们如何响应基于百分比的值。
这两个元素都从其左边缘的50％偏移。
红色框的左边缘将距其父容器的边缘50％。>
>请参阅codepen上的sitepoint（@sitepoint）的笔vyyxgj。的最后一点是，由于位置和转换是两个不同的属性，因此我们可以将它们结合在一起。这使我们能够将绝对定位组合在一起，以将元素放置在页面上非常特定的位置，然后通过变换修改该位置。
>一个例子可能是使定位的元素上下动画。或者我们可以将定位与翻译结合在一起以实现灵活的垂直中心。
因此，尽管可以使用这两种放置元素的方法来获得相似的结果，但存在一些显着差异，并且结合了每种方法的优势使它们成为了非常强大的工具集。经常询问有关CSS翻译与位置的问题（常见问题解答）
我可以同时使用CSS翻译和位于同一元素上吗？您可以在同一元素上同时使用CSS翻译和位置。但是，重要的是要了解它们如何共同努力。位置属性将首先影响元素在文档流中的位置，然后翻译函数将从该位置移动元素。
>
CSS是否可以通过所有类型的位置值转换工作？ CSS转换具有所有类型的位置值 - 静态，相对，绝对，固定和粘性。不管位置值如何，翻译功能将从其位置移动。以上是ATOZ CSS：翻译与位置相对之间的差异的详细内容。更多信息请关注PHP中文网其他相关文章！
