Position relative

When using position: relative, the element is not pulled out of the flow of the document, so other elements still “see” it, unlike when we use fixed, absolute or sticky (when the element is sticking, anyway).

The inset properties allow you to move the element around, relative to where it is in the normal flow. When you move the element with those properties, the other elements don’t “see” that movement.

See the Pen Getting started with Grid by Kevin (@kevinpowell) on CodePen.

In general, I will use a translate to move an element, rather than a position: relative if I need to change the position of an element.

The most common time you’ll use position: relative is when you are also using position: absolute on another element.