HTML

<h1>

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

</h1>

CSS

span {

position: relative;

}

Which generates the following elements:

As you can see, we have applied the value ‘relative’ to the position property. Now that the element has been assigned this value, we are able to use a set of new properties that we haven’t seen before. They are as follows:

• left;
• right;
• top; and
• bottom.

These properties are simple enough to understand and use. They simply allow you to state how much to move the element from the specified direction. So giving the left property a value of ‘30px’ would move the element along 30px from the left. Likewise, giving the top property a value of 30px would move the element down by 30px.

So if we now update our CSS rule to make use of our new positioning properties, like so: