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.
Continue reading %AtoZ CSS Quick Tip: Difference between Translate & Position Relative%
by Guy Routledge via SitePoint
