The Lowdown on Absolute vs. Relative Positioning

by on 4th April 2012 with 51 Comments

screenshot

When I was first learning web development, the style side of CSS seemed straightforward and fun, but performing layout feats seemed like a confusing mess. I sort of felt my way around without a solid understanding of how things like positioning and floats worked and as a result it would take hours to perform even simple tasks. If this situation sounds familiar, then this article is for you.

One of the real revelations that I had early on was when I was finally able to wrap my head around how positioning contexts worked, especially when it came to the difference between absolute and relative positioning. Today we’re going to tackle this subject and make sure you know exactly how and when to apply a specific positioning context to a given element.

5 Different Position Values

screenshot

Let’s get some complexity out of the way up front. In reality, there are a whopping five different possible values for the position property. We’ll largely skip over inherit because it’s pretty self explanatory (simply inherits the value of its parent) and isn’t really supported well in older versions of IE.

The default position value for any element on the page is static. Any element with a static positioning context will simply fall where you expect it to in the flow of the document. This of course entirely depends on the structure of your HTML.

Another value that you’ve no doubt seen is fixed. This essentially anchors an object to the background so that wherever you place it, there it will stay. We often see this used on sidebar navigation elements. After scrolling down a long page of content, it’s a pain to go back to the top to navigate elsewhere so applying a fixed position to the navigation means the user never loses site of the menu. Click the image below to see a live example of this in action.

screenshot

So there you have three position values that are fairly straightforward and easy to wrap your mind around. The final two are of course absolute and relative. Let’s focus on explaining these independently and then take a look at how they can be used together to achieve unique results.

Absolute Positioning

Absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. To see how this works, let’s set up a simple unordered list of items that we’ll turn into clearly discernible rectangles.

screenshot

As we’ve already learned, by default these items will have a static position applied. That means they follow the standard flow of the document and are positioned according to the margins that I’ve placed on the list. Now let’s see what happens if I target one of these list items and apply a value of absolute to the position property.

screenshot

As you can see, the fourth list item was completely removed from the normal flow and placed at the top left corner of the browser window. Note that even if there were other content occupying this position, this element wouldn’t care. When something has absolute positioning applied, it neither affects nor is affected by other elements in the normal flow of the page.

The reason for absolute positioning is so we can position this item precisely where we want it. We do this with the top, bottom, left and right CSS properties. For instance, let’s say we wanted the fourth list item to be placed twenty pixels from the topside of the browser window and twenty pixels from the left side.

screenshot

To prove our earlier point about absolutely positioned items not interacting with other content, let’s move the fourth list item right into the territory of the other list items. Watch how it simply overlaps the existing content instead of pushing it around. Click on the image below to see and tweak a live example of this test.

screenshot

As one final note, notice how the fifth list item occupies the position previously held by the fourth rather than holding its position as if the fourth were still in place. Since the fourth item has been removed from the flow, everything else will adjust accordingly.

Relative Positioning

Relative positioning works similarly to absolute positioning in that you can use top, bottom, left and right to scoot an object to a specific point on the page. The primary difference is the origin or starting point for the element. As we saw above, with absolute positioning, the starting point was at the very top left of the browser window. Check out what happens when we apply relative positioning though:

screenshot

Nothing happened! Or did it? As it turns out, the object is indeed relatively positioned now, but its starting point is where it normally lies in the flow of the document, not the top left of the page. Now if we apply the same 20px adjustments that we used before, the result is quite different.

screenshot

This time the item was moved “relative” to its starting position. This is extremely helpful for when you want to slightly tweak an object’s position rather than completely reset it altogether. Notice that, just as with absolute positioning, the relatively positioned object doesn’t care about other items in the normal low of the page. However, the original position occupied by the relatively positioned element hasn’t been occupied by the next list item as it did with absolutely positioned elements, instead the document acts as if the fourth item still occupies that position.

Putting Them Together

Now that you know how absolute and relative positioning work on their own, it’s time to dive into a more complex example and see how they can work together in a truly useful manner. This time we’re going to build a nice little demo to show off how it all works.

HTML

Start with a simple div with a class of “photo” and place a 200x200px image inside. This is all the HTML we need so after you’ve got this, move over to some CSS.

<div class="photo">
  <img src="http://lorempixum.com/200/200/people/9" />
</div>
</pre>
</div>
<br />

Basic CSS

In your CSS, start by changing the body color to something dark. Then apply some basic styles to the photo element and give it some nice border and shadow styles.

body {
  background: #222;
}

.photo {
  border: 5px solid white;
  height: 200px;  
  width: 200px;
  margin: 50px auto;

  
  /*overly complex but cool shadow*/
  -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
          box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
</pre>
</div>

Here’s the resulting image. It’s nothing special, but it will provide a great testing ground for our positioning experiment.

screenshot

Applying a Strip of Tape

Let’s say we wanted to create the illusion that this photo was hanging from the background, connected by a small strip of tape. To pull this off, we’ll need to flex our newfound positioning muscle and leverage some pseudo elements.

The first thing we want to do is use the :before pseudo element to create our strip of tape. We’ll give it a height of 20px and a width of 100px, then set the background to white at 50% opacity. I’ll finish by adding in a slight box-shadow.

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

If we look at a live preview of our page after this code, we can see that we really screwed up our image. The piece of tape is really interfering with the flow of the document. Even though it’s not really visible, it has bumped our image right out of its border!

screenshot

Obviously, we’ve got some issues with how the pseudo element is being positioned. To attempt to fix this, let’s see what happens if we apply relative positioning to the piece of tape.

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: relative;
  top: 0px;
  left: 0px;
  
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Here’s the effect of this code:

screenshot

As you can see, we didn’t fix our problem, everything is just as screwed up as before. Since this didn’t work, let’s take the opposite route and see what happens if we use absolute positioning.

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Here’s what our demo looks like now:

screenshot

Our tape has finally made an appearance! Unfortunately, it’s way up in the corner. We could nudge it into place with the top and left values, but that wouldn’t actually be a workable solution. The reason is that this would put the tape at a specific point on the background, where it would stay no matter what. However, the image has been automatically centered in the viewport so as you change the window size it actually moves, meaning the piece of tape won’t be correctly positioned anymore.

So now we’ve tried both relative and absolute positioning with neither providing the solution we want. Where do we turn next? As it turns out, we haven’t really gotten the full story behind absolute positioning yet. You see, it doesn’t always default to the top left of the browser window. Instead, what position: absolute; really does is position the element relative to its first non-statically-positioned ancestor (inherit doesn’t count either). Since there hasn’t been one of those in previous examples, it was simply reset to the origin of the page.

So how does this translate into useful information? It turns out, we can use absolute positioning on our piece of tape, but we first need to add a positioning context to its ancestor, the photo. Now, we don’t want to absolutely position that element because we don’t want it to move anywhere. Thus, we apply relative positioning to it. Let’s see what this looks like.

.photo {
  margin: 50px auto;
  border: 5px solid white;
  width: 200px;
  height: 200px;
  position: relative;
  
  /*overly complex but cool shadow*/
  -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
          box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}


.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

As you can see, the pseudo element has absolute positioning applied, which means it will choose a starting point given the location of its first non-static ancestor. Since I’ve applied relative positioning to the photo, that item fits this description. So now our piece of tape will begin at the origin of the photo (even if the photo moves due to browser resizing).

screenshot

Now that we have found the starting position that we were looking for, we can tweak the top and left values to nudge the tape into place. Notice that I’ve applied a negative value to the top property so the tape sticks out of the image onto the background. The left position is set to center the tape horizontally (click here to see how the math works out).

.photo:before {
  content: "";
  height: 20px;
  width: 100px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: -15px;
  left: 50px;
  
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

As we can see in the finished version below, combining absolute and relative positioning was exactly what we needed to pull off the effect that we were going for. Click the image below to see and tweak the live demo.

screenshot

A Quick Summary

Positioning contexts can be difficult to wield if you’re attempting to implement them without a solid foundation of knowledge behind how they work. Fortunately, there are only three primary pieces of information that you need to remember to master absolute and relative positioning.

The first is that relative positioning will allow you to tweak an element’s position relative to its normal starting point. The second is that absolute positioning will allow you to tweak an element’s position relative to its first non-statically-positioned ancestor (defaults to page bounds if none is found). The final piece of information to remember is that both relatively and absolutely positioned items won’t affect the static and fixed items around them (absolutely positioned items are removed from the flow, relatively positioned items occupy their original position).

If you enjoyed this tutorial, leave a comment below and let us know. Are there any other foundational areas of CSS that you struggle with that you’d like us to cover?

Other Posts in The Lowdown on CSS:

Comments & Discussion

51 Comments

  • Andrew

    Amazing article, thanks!

  • Michael Costa

    That’s a very clearly written guide on how to use positioning. Job well done Joshua! :-)

  • Jakob

    Very nice explanation! However, it’s worth mentioning that relative positioned elements still take up their reserved space in the flow of the page, as compared to absolutely positioned elements.

  • http://codehill.com Amgad

    Very thorough. Thanks!

  • http://www.thevectorbox.com The Vector Box

    Great explanation! very in depth.

  • Max Keyner

    nice tutorial, eventhough i already knew everything, i can use it for people who dont.

    its also worth mentioning that a element with position:absolute is absolutely position in respect to the first non-inherit/static positioned element

  • http://decodekult.com decodekult

    Nice written, and like said before it could have gone a little deeper: absolute inside a relative, the most usefull scenario.

  • http://www.iliasiovis.com Ilias Iovis

    Great and thourough article.

    Just a small addition.
    It’s worth mentioning that older mobile devices and tablets and their respective browsers have some issues with position fixed on elements. They work as if they were static.

    Only iOS 5+ now supports position fixed correctly. So beware of your responsive and mobile layouts!

  • nomi

    Yet another informative post. I love how you explain stuff in a simplified way.

    Keep up the good work.

  • Libbie

    Really useful, thanks!

  • Andrew

    Great post. I’ve always fiddled until it works but now it actually makes sense. Many thanks!

  • Joshua Johnson

    Thanks for the feedback everyone! Greatly appreciated. I’ve updated the content based on some suggestions.

  • spadooky

    OH MY GOD THANK YOU. seriously.

  • http://www.giometri.com egiova

    Crystal clear.
    My intuition told me all this, you know kind of: “When I do this, the element does that”.
    But I never read so clear explanation and demonstration.
    Well done.

  • FreakDeziner

    Thanks! I usually have problems with that and i mess everything then I “give up”. :D

    Thanks it helped me alot!

  • http://www.thowlett.co.uk/ Tom

    Great article. Really cleared some things up because I was really just taking a stab in the dark before.

    Sometimes I get really stuck with centering objects on the screen or centering objects within divs (horizontally and vertically). Especially when you have two objects that you want to display inline with one another and center that in the window. I’m always having trouble with that, and when I eventually get it right I am unsure what element has fixed the issue.

  • Bubba Floyd Smith

    This is real good. I red many articles on relative and absolute positioning, but did not really understand them until now. I think the trial-and-error style of writing anticipates and clears up many sources of confushun that people go through trying to understand this stuff.

  • http://www.paulund.co.uk Paul

    Very nice article about the basics of CSS positioning this is still something that people can get confused over. Will recommend this for anyone having trouble understanding.

  • http://modraideja.com modra ideja

    Great post! I always have problems with positioning, this will certanly be a huge help!

  • http://theindustry.cc Jared Erondu

    Great post Josh! I personally hate fixed positioning solely due to my new addiction to RWD. Though my personally site does have it in there, lol.

    Media queries solves it for me!

  • Joshua Johnson

    Thanks Jared! To be honest, I don’t think I’ve ever really used fixed positioning outside of explaining how it works :)

  • http://saraccodesign.com Chris

    I learned all kinds of things, not only about positioning. Very useful. Thanks.

  • http://filmyboss.com Mohit Bumb

    Nice Post Joshua

  • http://www.graphicriver-review.com/ GRR

    Thanks, I’ll bookmark this guide for future reference!

  • http://thatwriter.net/blog thatwriter

    Great article and very timely – I just discovered position:
    Thanks.

  • james

    Thanks for the article. I always got a bit mixed up in my head between absolute and relative positioning and where they would both be used differently, I always tried to botch it using DIVS, but this straightens it out. Keep up the good work with these short concise articles, web design should be broken down into chunks!

  • Dana

    Just found your site through Zite magazine, feel very fortunate, and signed up immediately to receive your articles. I used the article dealing with moving images in HTML and CSS only, and am delighted with the result on my web site.
    Just not into Facebook, will be waiting for the article.
    Thank you for the very clear explanations and choice of subjects.

  • Sergio Alegria

    Great and clean article, thanks.

  • http://www.dezebo.com dezebo

    Very nice explanation! However, it’s worth mentioning that relative positioned elements still take up their reserved space in the flow of the page, as compared to absolutely positioned elements.

  • FreakDeziner

    Simple really clen article I spend allot of hard work to understand on some other videos and some shity explanations. But these for sure helped me better then any video tutorial. ;)

  • http://www.lemieux-design.net Al Lemieux

    One very important thing to know about absolute positioning is that its relative to its parent container. If it’s parent container’s positioning is set to relative, then the absolutely positioned elements context will not be to the browser window (viewport), but to the container element.

    Ex.

    — Some Content –

    #content { position: relative; }
    #grid { position: absolute; top: 20; left: 100; }

    The grid div will be absolutely positioned inside the content div.

  • http://www.soulcitymovement.org/leshthedesigner Lesh

    Thank you so much for your article. I now have a clearer understanding of positioning elements in a webpage :)

  • Daniel B.

    That’s great! From Budapest!

  • http://amykvistad.com Amy Kvistad

    Thanks for a great simple explanation of CSS positioning! I bookmarked the article for future reference but I think I will remember this well written tutorial.

  • Oscar

    Thanks for the article. Great Job!

  • Paul

    Thanks, Joshua, for a clear and thorough explanation of an easily misunderstood concept. I’ve bookmarked the page!

  • http://rolandshield.com Roland Shield

    This is really helpful for a CSS Goombah like myself. I joined Team Treehouse in hopes of getting such nuggets and while their video/quiz “paradigm” has it’s own value, these sort of tutorials I find most helpful. And you can’t beat the price !

  • Gerry O’Neill
  • Kash

    This is simply awesome and you have just clear my doubts of relative and absolute positioning.

    Thanks again for this post and keep up the good work.

  • http://sushilbharwani.blogspot.com sushil bharwani

    Very Nice explanation. Thanks for bringing this with a wonderful example.

  • Mosanta

    Showed some light to a dumbo like me…

  • http://artphilia.de Nadia

    Love the article. Thank you so much. :D

  • Tim

    Great article, the example cleared up the mud in my brain!

  • carine

    WOW!!! amazing…after long times of trying to understand how they work together and alone…i finally get it!!! thank you so much! you’re a blessing!!!!

  • Basw

    Thanks great article!

  • AntoxaGray

    Relative is most used by me, I also use absolute inside of relative ofter. Not a fan of fixed.

    Static is just default and nothing special (I never had to declare position:static).

  • http://facebook.com david john b. galapate

    i learn a lot about absolute and relative witdh

  • http://thecleaningcompass.com Mike

    Very well written, very understandable, great example. This is a very dynamic and complex topic and this is probably the most specific and helpful tutorial I have ever read on the subject. Kudos, great work!

  • Irene

    It’s very well explained, thank you!

  • Cressida

    FINALLY! Now I feel that I deeply understood the difference and the usage of both position values! Thank you so much!

  • Kevin

    Perfectly explained. Thaks!!

Subscribe
Membership
About the Author