#110: Quick Overview of CSS Position Values

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to "nudge" and leaves the element's original position in the page flow. Absolute and fixed allow for exact placement of elements and remove them from the page flow. Fixed positioned elements are unaffected by scrolling. All of them set a new positioning context and allow z-index to work.

Links from Video:

Comments

  1. User Avatar
    Chris Coyier
    Permalink to comment#

    Sorry I didn’t close that span folks! Fortunately HTML5 is cool with that.

    • User Avatar
      balboa
      Permalink to comment#

      don’t worry about that…you’ll get better when you will create your first web site :-P…anyway thanks for tutorial

    • User Avatar
      Enrique
      Permalink to comment#

      the awkward moment when he made this site

    • User Avatar
      balboa
      Permalink to comment#

      the awkward moment when you didn’t get the joke and trying to be smart ;)

    • User Avatar
      Randy
      Permalink to comment#

      Great video! Very well explained, it cleared a lot for me. I was struggling with grasping the whole idea of positioning a div in CSS.

      Now I need to get a firmer understanding when to use id and class. I see you used class instead of id in your example of positioning divs next to and top of each other. I’m not sure why? Will id work just as well as using class?

      I’m a bit confused as to when I use both or one instead of the other. Any suggestions? I could show you an example of what I am using to learn CSS.

      **
      Thanks again for such a good video!

      Cheers!**

  2. User Avatar
    Alekhoff
    Permalink to comment#

    Thanks for this amazing video Chris! You are the best !

  3. User Avatar
    Matt
    Permalink to comment#

    Thanks Chris for the refresher!

  4. User Avatar
    Terence
    Permalink to comment#

    always great to brush up on the basics, thanks Chris!

    I think I heard you mention recently that you’ve been using SASS for your recent projects, any chance of doing a screencast for that? I just started using it and it is amazing!

  5. User Avatar
    Solid
    Permalink to comment#

    Thanks, Chris! I needed that.

  6. User Avatar
    Sam
    Permalink to comment#

    Great Video. Good refresher + new stuff to learn. Didn’t know there is a box-sizing or that you can stretch boxes with all 4 directions in positioning fixed…

    great job

  7. User Avatar
    Richard Dale
    Permalink to comment#

    Aye I’d love to see a SASS video, not the most user friendly.

  8. User Avatar
    Rod
    Permalink to comment#

    Great video, I wasn’t sure which were exactly the differences between the four types of position,

    Really help me to understand,

  9. User Avatar
    David
    Permalink to comment#

    q? off-topic what’s the name of the introduction of your screencasts? how can i search this ones, any good tutorial about how to make one or who made it?

    thks.

  10. User Avatar
    Whymarrh
    Permalink to comment#

    Did anyone else notice the color? #BADA55 … nice touch Chris, and great video. I never really understood positioning: I feel that even though CSS isn’t all too complex, it’s really difficult to master.

  11. User Avatar
    mark shirley
    Permalink to comment#

    Great video – I tried to download and keep a copy but the download doesn’t work

  12. User Avatar
    Miles Reid
    Permalink to comment#

    Excellent video, Chris – thanks for the refresher!
    Miles

  13. User Avatar
    Ian E.
    Permalink to comment#

    Pretty #BADA55 screencast bro. Enjoy you on the ShopTalk Podcast as well. Thanks for all the great info.

  14. User Avatar
    JoshtheDesigner
    Permalink to comment#

    Great Tutorial! Thanks Chris!

  15. User Avatar
    syednoor
    Permalink to comment#

    Hahahahah “#BADASS” ( i.e,) IE

  16. User Avatar
    Druid of Lûhn
    Permalink to comment#

    This probably comes from me reminding Chris that he didn’t put “Position” in the Almanac…

    Gotta say that #BADA55 was a nice touch. Maybe you could have integrated #C55 as well?

  17. User Avatar
    Mark Forbes
    Permalink to comment#

    What do you use to record the screen? I’ve tried multiple programs and they’re all reallllly bad and distorted etc :/

  18. User Avatar
    Alexander
    Permalink to comment#

    Heey Chris,

    Thanks for this great screencast! Learned a lot of it, and i really didn’t know anything about positioning!


    mrdejong

  19. User Avatar
    Casey
    Permalink to comment#

    Very nice Chris, thanks for positioning video!

  20. User Avatar
    mark shirley
    Permalink to comment#

    Hi Chris I have a problem downloading your video (osx firefox)

  21. User Avatar
    Pedro
    Permalink to comment#

    Thank you very much Chris

  22. User Avatar
    Jay
    Permalink to comment#

    Chris thanks for the info man. I’ve struggled with that for awhile, even reading the positioning property on W3C didn’t seem to help… but this video puts it into perspective. It’s gonna be easier to make overlays now I can tell ya that :)

    BTW thanks for the link to dabble.

  23. User Avatar
    Jon
    Permalink to comment#

    Loving the video. I’ve been doing design for a while now with only a basic grasp on positioning. This was exactly what I needed to fully understand how it all comes together. Any chance you could do a similar video about the display property?

  24. User Avatar
    Jack
    Permalink to comment#

    Hi! nice video!
    Could you create an article explaining how to make two divs fill up available space inside a wrapper?

    thanks!

  25. User Avatar
    Den
    Permalink to comment#

    That is simple and great.
    Many, many Thanks Chris!!!!

  26. User Avatar
    AmrAbdelaziz
    Permalink to comment#

    thanks chrise

  27. User Avatar
    Tim Rose
    Permalink to comment#

    Bit off “positioning topic”, but I never realised the point of box-sizing before, thanks. I’ve been using extra mark-up to handle this normally.

    I also liked the overlay diversion.

    #FAB – jeez, it’s really hard to make up #BADA55 hex names!

  28. User Avatar
    phil
    Permalink to comment#

    thanks i finally get this after being a web developer for 2 years

  29. User Avatar
    John Aspinall
    Permalink to comment#

    Awesome video, have read about ten articles on CSS positions and didnt understand it fully – after watching this video, I know do!

    Thanks Chris, keep up the good work!

  30. User Avatar
    Edson
    Permalink to comment#

    Chris, did you notice that if we set some element absolute positioned inside an element relative positioned but also with display:table, then the “relative” position will be lost. Do you know why this happen? It’s a kind of bug?

  31. User Avatar
    Andru Stoicescu
    Permalink to comment#

    it’s always nice to see a small tutorial on some of the basics of css. It’s absolutely crucial to fully understand how to use the position property of an element if you want to be able to easily manipulate any element on the page. By adding jquery into the equation you can achieve lots of cool things.

  32. User Avatar
    Reed
    Permalink to comment#

    Chris, once again another great screencast.
    I thought I knew all about CSS positioning, but there were things I still didn’t know.
    I had been so pissed off by the 100% + padding = scroll bars.
    I think my life has been changed by box-sizing.

    Going to go write a novel now….

  33. User Avatar
    Karen
    Permalink to comment#

    Thanks so much for this Chris.

  34. User Avatar
    Gerwin van der Feijst

    This will be one of the resources presented to new people at our company. People relatively new to html still struggle with them (the more experienced get freaked out aswel from time to time ;-) )

    Tomorrow at the office i will check if your website already made it to our resources list. Surely one to add! Thanx.

  35. User Avatar
    anonymous

    that was too quick!

  36. User Avatar
    beau

    Good refresher.
    and, “hey guys” big improvement over hello world ;-}

  37. User Avatar
    Adam Clark
    Permalink to comment#

    Chris, I’ve seen a million screencasts about positioning (and other CSS principles) but yours always seem really well thought out, structured and easy to understand. I thank you for the effort you put into these things.

  38. User Avatar
    Enrique
    Permalink to comment#

    Awesome! I love your tutorials.

  39. User Avatar
    Tirmizi
    Permalink to comment#

    Hi Guys,

    I am new to css and html and boy am I glad I found your website. The tutorials are so easy to understand .. I was really getting tired ready forums and finding answers, cause video is always a better medium to see whats going on .. so great job.

    Regards,

    – Tirmizi

  40. User Avatar
    EvnDavis
    Permalink to comment#

    Nice tutorial. Love your work, keep on…

  41. User Avatar
    Abhijit Aitwade

    Awesome! tutorial.
    Thanks for sharing.

  42. User Avatar
    Oleg
    Permalink to comment#

    Thanks a lot!

  43. User Avatar
    Michael
    Permalink to comment#

    Thanks Chris, Found this site through Lifehacker. Your tutorial is exactly what I was looking for. Awesome!

  44. User Avatar
    Oyun
    Permalink to comment#

    Positioning elements is sometimes confusing. Your video helped me a lot. Thanks.

  45. User Avatar
    manish jain
    Permalink to comment#

    thanks for sharing….thanks a lot…

  46. User Avatar
    Harsha
    Permalink to comment#

    Excellent ! Teaching Chris, you are great!

    Thank you.

  47. User Avatar
    thanks a ton
    Permalink to comment#

    never thought it would be that easy.

  48. User Avatar
    Øyvind
    Permalink to comment#

    Hi Chris !

    I love your tuts. Its so down to earth easy to understand !!!

    Merry Chrismas :)

  49. User Avatar
    Good Apple
    Permalink to comment#

    Great tutorial Chris. I like how you make it interesting. Thanks!

  50. User Avatar
    Heri
    Permalink to comment#

    Awesome tutorial… Thanks to share…

  51. User Avatar
    virneto
    Permalink to comment#

    Again…Great information!!!

    I usually only stick around just reading your posts. I must take some time to see your videos!! This one is great!!

    Thanks!!

    Bests Regards!!

  52. User Avatar
    Brad Williams
    Permalink to comment#

    Wow, that was an amazingly informative 13 minutes, thanks!

  53. User Avatar
    Connor
    Permalink to comment#

    Fantastic video!!! In 13 minutes this taught what 2.5 hours in a classroom couldn’t clarify!

  54. User Avatar
    Shahul
    Permalink to comment#

    Explained Excellently… Great video.. Thanks

  55. User Avatar
    Kim
    Permalink to comment#

    Excellent! This helped me quickly sort out a complex WordPress header customization problem that I’d been banging my head against. Clarifying the position property and nailing it down made it easy to sort out its partner-in-crime: the display property.

    This was all for the sake of responsiveness, of course, because iPhones have such a darned small area.

  56. User Avatar
    John
    Permalink to comment#

    I’m so glad I’ve started viewing more of your videos. I’m a student and you explain things in a way that is very easy to understand. I like how you add additional knowledge into this video about things like overlays. Great job!

  57. User Avatar
    Zlate
    Permalink to comment#

    I still haven’t find any practical use of the position: static; I wonder what purpose could it serve anyway?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      It’s the default, so if some other selector is setting one of the other values, you can override it back to the default with this. I don’t use it super often, but it does come up.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag