Position: Relative; What is It Good For?

Position: Relative; What is It Good For?

This post will take 2 minutes to read.

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 oth­er val­ues:

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

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 oth­er ele­ments).
  2. When you want to define a con­tain­ing box for abso­lutely posi­tioned des­cend­ant ele­ments.
  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 oth­er). 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 foot­er being pushed down by your main con­tent.

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 ele­ments.

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 posi­tioned).

Containing absolute 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 ancest­or (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 ancest­or, set­ting position: relative; on that ancest­or will do the trick without affect­ing the flow of that ele­ment.

How relative positioning sets a context for absolute descendants

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 stat­ic pos­i­tion­ing is in fact no pos­i­tion­ing at all, stat­ic ele­ments can’t be con­tain­ing boxes for abso­lute ele­ments.

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.

Tweet this

3 Comments

  1. Jack Rugile

    Nice writeup, the whole pos­i­tion­ing concept con­fused me for so long when I star­ted with CSS. It still bugs me that cer­tain things aren’t broken up more. For example, if you want to adjust an element’s pos­i­tion (top, bot­tom, left, right) and have z-index apply, then you use pos­i­tion: rel­at­ive, but then that ele­ment is forced to be the con­tain­ing ele­ment, which might not be what you want. I’ve run into that situ­ation a lot. I just wish the con­trol was more gran­u­lar.

    I also won­der if there is any reas­on not to have top, bot­tom, left, an right and z-index apply to stat­ic ele­ments. If you want stat­ic ele­ments to behave as they do now… just don’t use those prop­er­ties, but if you do, then use them. Chris Coyier talked about this a little bit here: http://css-tricks.com/what-if-there-was-no-position-static/

  2. Nathaniel Higgins

    You also need to keep in my pos­i­tion “sticky”, which already exists in Chrome Canary and, if I remem­ber cor­rectly, is com­ing to oth­er vendors soon. It acts like a mix between rel­at­ive & fixed, as in, it’s rel­at­ive while the ele­ment is in view­port, but scrolls with the view­port once it isn’t,