CSS Positioning 101

by Noah Stokes

66 Reader Comments

Back to the Article
  1. @shamyugy4 – bq. also relative positioning allows me to move something relative to the parent
    Yes, in that the coordinate system it is referencing is starting at the top left of it’s parent element, if that element is set to relative.

    @Theirry Koblentz – As long as the parent element is set to relative or absolute, it will serve as a new coordinate system.

    Copy & paste the code below to embed this comment.
  2. As long as the parent element is set to relative or absolute, it will serve as a new coordinate system

    This is not true and you are confusing people with your article and comments. Please do the appropriate edits.

    This is what the spec [1] says about the relative positioning scheme:
    “The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position”.

    What you call a a new coordinate system is in fact called the box’s containing block. But this is related to the absolute positioning scheme (not the relative one).

    [1] “Section 9 Visual formatting model”:http://www.w3.org/TR/CSS2/visuren.html#choose-position

    Copy & paste the code below to embed this comment.
  3. Ah, nothing like a good old css debate. @ ThieryyKoblentz, without looking too much like the little guy peering out from behind you waving my fist, you’re absolutely right (although I can claim prior art, having mentioned this in post 20).

    Explaining the mechanics of absolute and relative positioning in css has always felt like a challange, but I’ll give it a go.

    An element with position relative is always offset relative to it’s normal position in the flow. In other words, it is shifted relative to where it would be under normal circumstances, and shifting it doesn’t affect the layout of elements around it. It’s like a ghost that has left its body behind. A body that has width and height and affects its surroundings but is invisible. The ghostly box is able to move but is still connected to the old body in that its position is still measured from it.

    Now an element with position absolute is even easier. It no longer affects its surroundings at all (it’s pulled out of the layout flow). It’s now a true ghost with no body left behind. As far as its sibling elements are concerned it’s as if it no longer exists. To get its position, look through each of its parent elements until you find one with either position: relative, or position: absolute. That element will serve as the reference point. Only if you don’t find a “positioned” element will it be offset from the document.

    Long winded, and easier with diagrams I’m sure. I may not have made it any easier to understand, but the article certainly has it wrong. I agree with @ThieryyKoblentz that it could cause more confusion than it cures.

    Copy & paste the code below to embed this comment.
  4. This article was just what I needed.  As a Flash Developer making the transition to web standards, positioning is by far one of the most frustrating techniques to master.

    Copy & paste the code below to embed this comment.
  5. @Thierry Koblentz – I appreciate the follow up and passion that you are bringing to this discussion. Where you say:

    The offset is in relation to the position of the element itself (in the normal flow). In other words, top:20px is 20px away from its original position. It has nothing to do with its parent nor with the document.

    You are correct and I don’t believe that I’m contradicting you in this article. What I’m trying to get at by referencing the parent element is for example:

    If a parent element is sitting in the middle of the page and a child element is offset from that, then it will be offset from the middle of the page since it’s parent is sitting there.

    Yes, it is it’s original position as you state above, I was emphasizing the parent as a way to say if the parent is in a particular place on the page, relatively or absolutely positioned, you can position off of that placed element with a child element. I hope that makes sense. I do believe that we are getting at the same thing here.

    @DrLangbhani – I really enjoyed your “ghost” analogy – that’s a great example. Hopefully my reply above to Thierry makes sense to you as well.

    @beninteractive – I’m glad that it could get you a few steps closer to mastering!

    Copy & paste the code below to embed this comment.
  6. I found this article refreshing. Since the advent of WP and all the themes and frameworks, there hasn’t been a whole lot of full layout CSS going on.

    I do a fair amount of Custom CSS using a Thesis Theme but it’s mostly for tweaking, placement, etc.

    I [sort of] miss the days of really using all these positioning elements. But not really.

    :)

    Copy & paste the code below to embed this comment.
  7. It might be considered basic, but we can all stand to be reminded of the basics from time-to-time. The article was well written as expected—I’ll be sure to pass this on for reference material and credit ALA.

    Again, terrific post—thanks!

    Copy & paste the code below to embed this comment.
  8. What is the point of relative positioning if you can’t have any content inside of your relatively positioned divs?

    If you try to put any content inside Example D, it will look something like this, when we would realy want something like this which was obtained with absolute positioning.

    Maybe I’m looking at this from the wrong angle, but I couldn’t for the sake of hell position my content properly in relative divs.

    Anyone have any ideas?

    Copy & paste the code below to embed this comment.
  9. @paulici12 – In your test.html, using the absolute value removed the elements from the document flow which is why they move around exactly as you would like. In test2.html the relative value still keeps the elements in the document flow. This means that because the id=“box_2” comes after the text in id=“box_1” it will position itself after the text; thinking back to the stacking of blocks analogy, id=“box_2” is being stacked underneath the text.

    Copy & paste the code below to embed this comment.
  10. Thank you for posting this article!  I come across a useful article on CSS positioning about once a month and always read them since—as you pointed out—positioning is so important and still fairly misunderstood by novice and advanced CSS coders alike.

    This article takes a much simpler and coherent approach to positioning than most others that I’ve read.

    Copy & paste the code below to embed this comment.
  11. Very good overview of this topic, as one in the crowd “technical developer that occasionally has to do some css work” this was perfect!

    I fond one other difference between absolute and relative. I made a form, using width: on the labels to position the form fields correctly. Worked fine until I came to the first set of radio buttons (separated with a br/) Then the upper one was correctly placed, whereas the lower one lined up with the label. Wrapping those into a div with position:relative made no difference, whereas position:absolute made the radiobuttons align just as I wanted them to, whereas the relative box was allowed to be “squeezed between the lines”.

    Copy & paste the code below to embed this comment.
  12. I never fully understood positioning elements, that is until now. This was a very well written article and I thank you for saving me much of the frustration I would have gone through had I not found and read this piece. Keep up the great work.

    Copy & paste the code below to embed this comment.
  13. Brilliant post and elegantly explained. Your post is as elegant as the CSS which is laid out. Thanks for the example pages as well. It helps draw a better picture and makes things easier to understand. I’ll be giving this post the social media treatment.

    Thank you

    Copy & paste the code below to embed this comment.
  14. I really enjoyed this article. It was a nice refresher to some CSS of which I’m a little rusty with. The examples were really helpful.

    Copy & paste the code below to embed this comment.
  15. I needed this article! Thank you.
    On the last example, the footer does not stay fixed on my iPhone 4.

    Copy & paste the code below to embed this comment.
  16. @brennanag -Speaking without too much knowledge on the subject, I do know that fixed position does not work the same on the iPhone out of the box. This article explains why an even offers a solution:  http://doctyper.com/#/post/archives/200808/fixed-positioning-on-mobile-safari/

    Copy & paste the code below to embed this comment.
  17. 1. There is an accessibility issue with the use of absolute or fixed positioning for text blocks.  This often results in text being cut off or text overprinting other text if the site visitor has set a larger font size than the site designer expects.

    2. There is a usability issue with the use of fixed positioning.  If the site visitor scrolls by clicking just above the down arrow on the scroll bar, at least Firefox 3.6 Windows, and possibly other user agents, does not take the height of fixed elements into account when deciding how far to scroll.  This often results in one or two lines of text being missed, that is, not displayed to the site visitor before or after scrolling.  So the site visitor has to train themselves not to use that scrolling method on such a site.

    Copy & paste the code below to embed this comment.
  18. 2. Actually, two scrolling methods may be taken away by a fixed block.

    For the example http://www.alistapart.com/d/css-positioning-101/example_j.html in a browser sized at approximately 1124 × 563 and the default font size:

    The last line of text shown is in the second paragraph:

    nec dolor augue, sit amet blandit urna. Curabitur vitae elit id sem blandit tincidunt. Fusce aliquam sodales mauris

    Scrolling by clicking just above the arrow makes the new top line:

    libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor

    with a sliver cut off from the top, missing the line:

    vitae molestie. Aenean sit amet ligula sapien. Donec luctus ultrices condimentum. Fusce ac velit odio, sed luctus

    Scrolling by pressing the space bar did not lose any text at the default font size, but at 18-point minimum font size, the last line before scrolling is in the first paragraph:

    tristique condimentum, odio justo faucibus diam, sed imperdiet

    Pressing the space bar makes the new top line as:

    rutrum ut sem. Maecenas pulvinar bibendum lectus vel malesuada.

    meaning the line:

    metus dui non augue. Ut felis enim, accumsan id tempor vitae

    was skipped.  Usability and accessibily issue.

    Copy & paste the code below to embed this comment.
  19. It was a pleasure to read this article about necessary basics for css-layouts and remembering the old days building creative constructions with wooden blocks. And you are right: With css bulding is even cooler! I’ve translated this article into German: http://kleines-universum.de/html-css/css-position-einmaleins-aus-alistapart/
    I’ve a question also for future translations: Is it okay to deeplink the given examples or should I copy them to my webspace? Thank you very much!

    Copy & paste the code below to embed this comment.
  20. I find positioning extremely frustrating especially if im working on a new design, when you test in the browser, Firefox, Chrome and I.E can be quite different especially if you want pixel perfect positioning. Usually I make a div container and place everything in it get it to work in as many of the browsers as I can and then use a hack for the one I cant. Which ultimately isn’t the best solution but works for the minute.

    Copy & paste the code below to embed this comment.
  21. “we apply different position values to a given selector until we get one that works” – well, actually we do this because there are browsers out there that don’t respect standards. Ten years ago we’ve learned that all CSS is try and error – and we still need to come over it.
    As long as browsers don’t implement CSS like it’s written in the specs, theres less reason to study the specs, exactly?

    Copy & paste the code below to embed this comment.
  22. Another article on this subject: the “position property”:http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/ on YUIBlog.

    @DrLangbhani, I’ve plugged your analogy in there :)

    Copy & paste the code below to embed this comment.
  23. Just a “thank you” from this self-taught artist-designer. I’ve learned this material a number of times when things didn’t fall together as I expected on the page. I think that now, thanks to your articulate explanation, I’ve finally got a handle on it for good. It’s not rocket science, but until you understand the underlying logic, it makes no intuitive sense. Now I think I do. Thanks for taking the time to lay it out clearly. Numerous books have essentially the same information, but have somehow still left me a little lost. Shows how important good writing is. It’s a lot more than efficient “content delivery.”

    Copy & paste the code below to embed this comment.
  24. @Eric – thanks for the kind words, I’m so glad things have clicked for you! Carry on.

    Copy & paste the code below to embed this comment.
  25. indeed with css we will save more energy when the page loads, I like this trick and if it had been added image maybe we can add background: # color url(image link) to add texture, and there will be more fantastic

    Copy & paste the code below to embed this comment.
  26. This is very well written article, good to have basics revised again. But this code could have been more optimised. That is what I think..

    Copy & paste the code below to embed this comment.
  27. Thanks for the clear instructions.  I am fairly new to css and this explained a concept that has had me tearing my hair out.  Straight away I was able to use what I learned to solve a problem on my site, in 5 minutes, that had, had me going around in circles for about 2 hours.  Thanks.

    Copy & paste the code below to embed this comment.
  28. @ UKdynamo -  Thanks for the feedback! Indeed the code could have been optimized, but for the sake of explanation and simplicity in learning it is presented as is.

    Copy & paste the code below to embed this comment.
  29. Thanks so much for the clearly written and illustrated article. This is exactly what I’ve been searching for in a positioning tutorial.

    Copy & paste the code below to embed this comment.
  30. another gold from Noah Stokes =)  thank you so much for all ideas & informations…

    Copy & paste the code below to embed this comment.
  31. Great article, well written and very informative.

    Thanks loads

    Copy & paste the code below to embed this comment.
  32. I’d been looking for a source to explain the basics of CSS Positioning. I am new to web design and really appreciated this well-worded article with great examples. Thanks!

    Copy & paste the code below to embed this comment.
  33. The article doesn’t really establish how contexts work for relative positioning. Example D nests the “blue” box* inside the red one, and that appears to be how you make the blue box display to the right of the red box and at the same level.

    What you don’t establish is how to make two boxes appear on the same horizontal level—have the same “top” offset—without one being nested inside the other.

    If that’s not possible, it would be a good thing to tell us so, so we don’t waste hours trying to figure out how to make this fairly obvious-seeming thing work. If it is possible, you would do well to construct your example to illustrate as much—since it’s clearly a preferable use-case to nesting a box inside another box to give the illusion of them having the same “top” offset.


    *It would be helpful if you used more obvious hex triplets to create your “red”, “blue”, and “green” examples—using the ones you do is basically a way of saying to users “you’re not advanced enough to play in our club, come back when you learn to read hex.”

    Copy & paste the code below to embed this comment.
  34. … the relative positioning use-case in this article is completely unrealistic.

    Copy & paste the code below to embed this comment.
  35. For example H2, “This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the left.” should be “This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the right.”

    Copy & paste the code below to embed this comment.
  36. Thank you so much for writing this article.  It has definitely taken the “mystery” and guess work out of positioning.

    Copy & paste the code below to embed this comment.