AtoZ CSS快速提示：相对翻译位置与相对位置的区别

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for the corresponding video about translateX here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看有关translateX的相应视频的完整记录和截屏视频。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on the differences between translate and position.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时候视频广播还不够，因此在本文中，我们添加了一些有关技巧translate和position快速提示。

X用于translate和position (X is for translate and position)

There are a number of CSS properties for placing elements on the page. These include big-picture layout properties like float, margin and padding and more fine-grained tools like position and translate().

有许多CSS属性可用于在页面上放置元素。 这些包括大图片布局属性(例如float ， margin和padding以及更细粒度的工具(例如position和translate() 。

On the surface, position:relative and transform:translate() seem to work in quite a similar way but there are some subtle differences which are important to grasp so we choose the right tool for the job.

从表面上看， position:relative和transform:translate()工作方式似乎非常相似，但是有一些细微的差异很重要，需要抓住这些差异，因此我们选择合适的工具进行工作。

translate和position:relative之间有什么区别？ (What’s the difference between translate and position:relative?)

In this post we’ll look at a number of differences between these methods for element placement but first, let me clarify what these various properties do.

在本文中，我们将研究元素放置方法之间的许多差异，但首先，让我澄清一下这些各种属性的作用。

If we set position:relative on an element we can use it to create a boundary for absolutely positioning elements within. This is probably the more common use of relative positioning but it’s not the use that we’re discussing here.

如果我们在元素上设置position:relative ，则可以使用它为绝对定位元素的内部创建边界。 这可能是相对定位的更常见用法，但不是我们在此处讨论的用法。

If we combine position:relative with one of the offset properties top, bottom, left or right the element will be moved from its original place in the layout whilst preserving the space in the document it once occupied. The element will be moved on to a new layer and its “layer order” or its stacking order can then be controlled with the z-index property.

如果我们将position:relative与偏移属性top ， bottom ， left或right则元素将从其在布局中的原始位置移动，同时保留曾经占据的文档中的空间。 元素将被移动到新层，然后可以使用z-index属性控制其“层顺序”或其堆叠顺序。

.thing {
  position: relative;
  top: 100px;
  left: 50px;
}

In the above example the element will be moved 100px away from the top and 50px away from the left of its original position.

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

When using transform:translate(x,y) we get a very similar visual result to using relative position. The same result as above could be achieved with the following snippet:

当使用transform:translate(x,y)我们得到与使用相对位置非常相似的视觉结果。 使用以下代码段可以实现与上述相同的结果：

.thing {
  transform: translate(50px, 100px);
}

In this case, we’re translating the coordinates of the element by 50px along the x-axis and 100px along the y-axis. The end result is visually the same as the previous position example.

在这种情况下，我们将元素的坐标沿x轴平移50px沿y轴平移100px 。 最终结果在视觉上与先前的position示例相同。

So, why do we have two ways of doing the same thing? Well, there are some differences between these approaches…

那么，为什么我们有两种做同一件事的方式呢？ 嗯， 有这些方法之间存在一些差异...

浏览器支持 (Browser support)

position is a CSS2 property whereas transform is a CSS3 property. There are differences in browser support as a result although really the only browsers that don’t support 2D transforms are IE8 and below.

position是CSS2属性，而transform是CSS3属性。 结果，尽管实际上唯一不支持2D转换的浏览器是IE8或更低版本，但浏览器支持也有所不同。

If you need to support old versions of IE, transform won’t be an option for you.

如果您需要支持IE的旧版本，则将无法选择transform 。

GPU加速 (GPU Acceleration)

The transform property will use hardware acceleration where possible so using translate() over position will see performance benefits if any animations or transitions are also being used on the element.

transform属性将在可能的情况下使用硬件加速，因此，如果在元素上还使用了任何动画或过渡效果，则在position使用translate()会带来性能上的好处。

If you want to move an element as part of a transition or keyframe animation, favor using translate rather than position (this goes for both absolute and relative positioning). For more depth on this, including an explanation and performance profiling, check out this video from Paul Irish.

如果要将元素作为过渡或关键帧动画的一部分进行移动，则建议使用translate而不是position (这适用于绝对位置和相对位置)。 要对此进行更深入的了解(包括说明和性能分析)，请观看Paul Irish的视频 。

基于百分比的值表现不同 (Percentage based values behave differently)

One major difference between these two methods of placing elements is how they respond to percentage based values.

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

Take the following markup and styles:

采用以下标记和样式：

<div class="box position"></div> 
<div class="box transform"></div>

.box {
  width: 200px;
  height: 200px;
}
.position {
  position: relative;
  left: 50%;
  background: red;
}
.transform {
  transform: translateX(50%);
  background: blue;
}

Both elements have been given an offset from their left edge of 50%.

这两个元素的左边缘都有50%的偏移量。

The left edge of the red box will be 50% away from the edge of its parent container.

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

The left edge of the blue box will be 100px away from the left edge of its parent container. This distance is because 50% of 200px is 100px.

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

When setting percentage values with translate, the percentage is measured as a percentage of the elements computed width or height.

当使用translate设置百分比值时，该百分比将作为所计算元素的宽度或高度的百分比进行测量。

See the Pen vyYxgJ by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint( @SitePoint )的Pen vyYxgJ 。

合并position并一起translate (Combine position and translate together)

One final point to make is that because position and transform are two different properties, we can combine them together. This allows us to combine absolute positioning to place an element in a very specific place on the page and then modify that position with transform.

最后要说明的一点是，由于position和transform是两个不同的属性，因此可以将它们组合在一起。 这使我们可以结合绝对定位将元素放置在页面上的特定位置，然后使用transform修改该position 。

An example of this could be to have a positioned element animate up and down or left and right. Or we can combine positioning with translate to achieve flexible vertical centering.

这样的一个示例可能是使定位的元素上下或左右动画。 或者，我们可以将定位与translate结合起来以实现灵活的垂直居中。

So while these two methods of placing elements can be used to achieve similar results, there are some significant differences and combining the strengths of each approach makes them a really powerful set of tools.

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

翻译自: https://www.sitepoint.com/atoz-css-translate-vs-position/