There are four poten­tial val­ues for the position prop­erty (ignor­ing inherit) which are static, relative, absolute, and fixed. Now, while this art­icle will be focus­ing on the relative value, it is import­ant to under­stand some key bits of inform­a­tion about the other values:

• Static pos­i­tion­ing (the default value) is actu­ally a lack of positioning.
• Absolute or fixed pos­i­tion­ing removes the ele­ment from the flow of the document.
• Absolutely posi­tioned ele­ments are posi­tioned rel­at­ive to nearest posi­tioned ancestor element.

Right, now that you have wrapped your head around that, let’s talk about the uses for rel­at­ive pos­i­tion­ing. There are three main instances where it comes in handy:

1. When you want to move an ele­ment (while keep­ing it in the flow of the doc­u­ment, but without dis­turb­ing any other elements).
2. When you want to define a con­tain­ing box for abso­lutely posi­tioned des­cend­ant elements.
3. When you need an ele­ment to have pos­i­tion­ing so that you can use z-index.

Moving an element

Elements are nat­ur­ally rendered in the flow of the doc­u­ment, and as such, they inter­act (i.e. they affect the pos­i­tion of each other). This is gen­er­ally a good thing, as most of the ele­ments on your page have a rela­tion­ship with the ele­ments around them. For instance, a footer being pushed down by your main content.

Sometimes though, you want to move an ele­ment without it affect­ing any of the ele­ments around it. This is where position: relative; comes in handy. When using rel­at­ive pos­i­tion­ing with the top, right, bottom, or left prop­er­ties, it is only the gen­er­ated box that is actu­ally shif­ted; the ele­ment still remains where it was in the flow of the doc­u­ment. Keep in mind that this can often res­ult in over­lap­ping elements.

Also, it is import­ant to remem­ber that the top, right, bottom, and left prop­er­ties can’t change the size of a rel­at­ively posi­tioned ele­ment (they can if the ele­ment is abso­lutely positioned).

Containing abso­lute descendants

When pos­i­tion­ing an ele­ment absolutely—as it is removed from the flow of the document—the top, right, bottom, and left prop­er­ties don’t act as they would on a rel­at­ively posi­tioned ele­ment. These prop­er­ties are now based on the nearest posi­tioned ancestor (or the root ele­ment, if there are none). This means that if you are giv­ing an ele­ment a pos­i­tion of abso­lute and you want to con­fine it to a cer­tain ancestor, set­ting position: relative; on that ancestor will do the trick without affect­ing the flow of that element.

The ter­min­o­logy is a little tricky here as an ele­ment with position: static; appears as though it has a pos­i­tion set, but as static pos­i­tion­ing is in fact no pos­i­tion­ing at all, static ele­ments can’t be con­tain­ing boxes for abso­lute elements.

Using z-index

Lastly, z-index is only respec­ted on ele­ments that have a pos­i­tion set. So if you don’t want to remove an ele­ment from the flow of the doc­u­ment, but want to use z-index, rel­at­ive pos­i­tion­ing is your friend.