AtoZ CSS: Difference between Translate & Position Relative

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.

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.

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().

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.

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.

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.

.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.

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:

.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.

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.

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

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.

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.

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%.

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

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.

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

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

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.

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.

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.