ATOZ CSS：翻译与位置相对之间的差异

钥匙要点

• > CSS位置之间的主要区别：相对和转换：transpate（）它们如何影响其他元素的布局。位置：相对改变了元素在文档流中的位置，可能会影响其他元素，而转换：transpate（）移动元素而不影响其他元素的布局。
> CSS变换：Translate（）由于使用GPU（图形处理单元）加速而通常是动画的首选，这会导致动画和更好的性能。还值得注意的是，这两种方法之间的基于百分比的值的行为不同，翻译成元素计算的宽度或高度的百分比。
• >
> CSS位置：相对和变换：Translate（）可以在同一元素上使用。这种组合允许精确放置元素在页面上，并进一步修改该位置。这使它们成为元素放置的强大工具集。

本文是我们ATOZ CSS系列的一部分。您可以在此处找到该系列的其他条目。 您可以在此处查看有关Translatex的相应视频的完整成绩单和屏幕录像。

欢迎参加我们的ATOZ CSS系列！在本系列中，我将探索不同的CSS值（和属性），每个CSS值（和属性）以不同的字母开始。我们知道有时屏幕截图还不够，因此在本文中，我们添加了有关翻译和位置之间差异的快速提示。

>

x用于翻译和位置>

>有许多CSS属性用于将元素放在页面上。其中包括大型布局属性，例如浮点，边距和填充物，以及更细粒度的工具，例如位置和translate（）。 在表面上，位置：相对和变换：transpate（）似乎以一种相似的方式起作用，但是有一些微妙的差异很重要，因此我们为工作选择了合适的工具。

翻译和位置之间有什么区别：相对？

在这篇文章中，我们将查看这些方法的这些方法之间的许多差异，但首先，让我澄清这些各种属性的作用。

如果我们设置了位置：相对元素，我们可以使用它为

>绝对

>内部定位元素创建边界。这可能是对相对定位的更常见的用法，但不是我们在这里讨论的用途。

>

如果我们将位置结合在一起：相对与偏移属性之一的顶部，底部，左或右相对，则元素将从其原始位置移动在布局中，同时保留曾经占用的文档中的空间。该元素将被移至新层，其“图层顺序”或其堆叠顺序可以通过Z-Index属性进行控制。

<span><span>.thing</span> {
</span>  <span>position: relative;
</span>  <span>top: 100px;
</span>  <span>left: 50px;
</span><span>}</span>

>在上面的示例中，元素将从顶部移动100px，距其原始位置的左侧50px。

使用转换时：转换（x，y），我们得到的视觉结果与使用相对位置非常相似。通过以下片段可以实现与上述相同的结果：

在这种情况下，我们将沿X轴和100px沿Y轴翻译该元素的坐标。最终结果在视觉上与以前的位置示例相同。

<span><span>.thing</span> {
</span>  <span>transform: translate(50px, 100px);
</span><span>}</span>

>那么，为什么我们有两种做同样的事情的方法？好吧，这些方法之间存在一些差异……

>

>浏览器支持

位置是CSS2属性，而转换是CSS3属性。结果，浏览器支持存在差异，尽管实际上唯一不支持2D变换的浏览器是IE8及以下。 如果您需要支持IE的旧版本，则不是您的转换。

gpu加速度

>转换属性将在可能的情况下使用硬件加速度，因此，如果在元素上也使用任何动画或过渡，则使用Translate（）在位置上使用绩效好处。>

如果您想将元素作为过渡或密钥帧动画的一部分移动，请使用翻译而不是位置（这既适用于绝对和相对定位）。有关此的深度，包括解释和性能分析，请查看Paul Irish的这段视频。

基于百分比的值的行为不同

这两种放置元素方法之间的一个主要区别是它们如何响应基于百分比的值。

进行以下标记和样式：

这两个元素都从其左边缘的50％偏移。

红色框的左边缘将距其父容器的边缘50％。

蓝色框的左边缘将距其父容器的左边缘100px。此距离是因为200px的50％为100px。

用翻译设置百分比值时，将百分比测量为计算宽度或高度的元素的百分比。

>

>请参阅codepen上的sitepoint（@sitepoint）的笔vyyxgj。

>将位置结合在一起

的最后一点是，由于位置和转换是两个不同的属性，因此我们可以将它们结合在一起。这使我们能够将绝对定位组合在一起，以将元素放置在页面上非常特定的位置，然后通过变换修改该位置。

>一个例子可能是使定位的元素上下动画。或者我们可以将定位与翻译结合在一起以实现灵活的垂直中心。

因此，尽管可以使用这两种放置元素的方法来获得相似的结果，但存在一些显着差异，并且结合了每种方法的优势使它们成为了非常强大的工具集。

经常询问有关CSS翻译与位置的问题（常见问题解答）

> CSS翻译与位置之间的主要区别是什么？

> CSS翻译和位置之间的主要区别在于它们如何操纵元素的位置。 CSS位置会改变元素在文档流中的位置，这意味着它可以影响其他元素的布局。另一方面，CSS转换是一个转换函数，它可以移动元素而不会影响其他元素的布局。它更改了视觉渲染位置，而不是文档流中的实际位置。

我何时应该使用CSS翻译而不是位置？影响其他元素的布局。它对动画也有益，因为它可以促进更好的性能和更顺畅的动画。这是因为Translate使用GPU（图形处理单元），它在渲染图形和动画方面更有效。

我可以同时使用CSS翻译和位于同一元素上吗？您可以在同一元素上同时使用CSS翻译和位置。但是，重要的是要了解它们如何共同努力。位置属性将首先影响元素在文档流中的位置，然后翻译函数将从该位置移动元素。

>

为什么CSS翻译经常被推荐用于动画？ CSS翻译通常建议用于动画，因为它使用了GPU，这在渲染图形和动画方面更有效。这会导致动画更顺畅，而CPU（中央处理单元）的使用量更少，这可以改善网页的整体性能。

>

CSS是否可以通过所有类型的位置值转换工作？ CSS转换具有所有类型的位置值 - 静态，相对，绝对，固定和粘性。不管位置值如何，翻译功能将从其位置移动。

>我可以将哪些单元用于CSS翻译？

与CSS翻译，您可以使用像素值，百分比和视口单元。百分比相对于元素本身的大小，而不是其父元素。这使您可以更灵活地对元素的运动。 CSS位置，不建议使用。这是因为更改位置属性可以触发布局变化，这可能会对性能产生负面影响。对于动画，CSS翻译是更好的选项。

> CSS翻译如何影响元素的z索引？> 我可以使用CSS翻译以对角线移动元素吗？ ，您可以使用CSS翻译来对角线移动元素。您可以通过在翻译函数中指定x和y值来做到这一点。例如，Translate（50px，50px）会向右移动50像素，并将50像素向下移动，有效地创建对角线运动。 CSS转换会影响元素的可单击区域？ 🎜>不，CSS翻译不会影响元素的可单击区域。即使元素的视觉渲染已通过翻译移动。

以上是ATOZ CSS：翻译与位置相对之间的差异的详细内容。更多信息请关注PHP中文网其他相关文章！