CSS Positioning 101

by Noah Stokes

66 Reader Comments

Back to the Article
  1. “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.
  2. 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.
  3. 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.
  4. @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.
  5. 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.
  6. 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.
  7. 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.
  8. @ 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.
  9. 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.
  10. another gold from Noah Stokes =)  thank you so much for all ideas & informations…

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

    Thanks loads

    Copy & paste the code below to embed this comment.
  12. 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.
  13. 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.
  14. … the relative positioning use-case in this article is completely unrealistic.

    Copy & paste the code below to embed this comment.
  15. 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.
  16. 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.