<h1>

an <span>example</span> snippet of text

</h1>

CSS

span {

position: relative;

left: 30px;

top: 10px;

}

We can see how the element has moved by the specified amount.

You can also see that the original space where the text was once positioned, is reserved and continues to ‘influence’ the surrounding content. This is because relative positioned elements still preserve their original space in the document flow.

You might have also noticed how shifting the span element over 30px from the left has resulted in the text overlapping. This is one of the drawbacks of using this positioning style as it can cause overlapping of elements when adjusting the position.

Positioning an element relative is rarely used in this way as its uses are very limited. It’s actually at its most useful when paired with a child element with an ‘absolute’ positioning value. Let’s explore this now.

Absolute

Absolute positioned elements are very flexible as they in no way influence the surrounding elements. This is another value that’s easier to show than explain. So let’s pick up where we left off with the previous example. Let’s take the same code and swap out the position value for ‘absolute’, like so.