#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:


  1. Chris Coyier
    Permalink to comment#

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

    • 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

    • Enrique
      Permalink to comment#

      the awkward moment when he made this site

    • balboa
      Permalink to comment#

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

    • 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!


  2. Alekhoff
    Permalink to comment#

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

  3. Matt
    Permalink to comment#

    Thanks Chris for the refresher!

  4. 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. Solid
    Permalink to comment#

    Thanks, Chris! I needed that.

  6. 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. Richard Dale
    Permalink to comment#

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

  8. 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. 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?


  10. 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. mark shirley
    Permalink to comment#

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

  12. Miles Reid
    Permalink to comment#

    Excellent video, Chris – thanks for the refresher!

  13. Ian E.
    Permalink to comment#

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

  14. JoshtheDesigner
    Permalink to comment#

    Great Tutorial! Thanks Chris!

  15. syednoor
    Permalink to comment#

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

  16. 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. 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. 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!


  19. Casey
    Permalink to comment#

    Very nice Chris, thanks for positioning video!

  20. mark shirley
    Permalink to comment#

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

  21. Pedro
    Permalink to comment#

    Thank you very much Chris

  22. 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. 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. 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?


  25. Den
    Permalink to comment#

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

  26. AmrAbdelaziz
    Permalink to comment#

    thanks chrise

  27. 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. phil
    Permalink to comment#

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

  29. 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. 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. 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. 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. Karen
    Permalink to comment#

    Thanks so much for this Chris.

  34. 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. anonymous

    that was too quick!

  36. beau

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

  37. 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. Enrique
    Permalink to comment#

    Awesome! I love your tutorials.

  39. 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.


    – Tirmizi

  40. EvnDavis
    Permalink to comment#

    Nice tutorial. Love your work, keep on…

  41. Abhijit Aitwade

    Awesome! tutorial.
    Thanks for sharing.

  42. Oleg
    Permalink to comment#

    Thanks a lot!

  43. Michael
    Permalink to comment#

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

  44. Oyun
    Permalink to comment#

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

  45. manish jain
    Permalink to comment#

    thanks for sharing….thanks a lot…

  46. Harsha
    Permalink to comment#

    Excellent ! Teaching Chris, you are great!

    Thank you.

  47. thanks a ton
    Permalink to comment#

    never thought it would be that easy.

  48. Øyvind
    Permalink to comment#

    Hi Chris !

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

    Merry Chrismas :)

  49. Good Apple
    Permalink to comment#

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

  50. Heri
    Permalink to comment#

    Awesome tutorial… Thanks to share…

  51. 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!!


    Bests Regards!!

  52. Brad Williams
    Permalink to comment#

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

  53. Connor
    Permalink to comment#

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

  54. Shahul
    Permalink to comment#

    Explained Excellently… Great video.. Thanks

  55. 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. 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. Zlate
    Permalink to comment#

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

    • 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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.