Grow your CSS skills. Land your dream job.

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

      Cheers!**

  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. 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. 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. 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. 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. Excellent video, Chris – thanks for the refresher!
    Miles

  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. Great Tutorial! Thanks Chris!

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

  16. 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. Heey Chris,

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


    mrdejong

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

    Thank you very much Chris

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

    thanks!

  25. Den
    Permalink to comment#

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

  26. thanks chrise

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

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

  29. 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. 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. 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. 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. Good refresher.
    and, “hey guys” big improvement over hello world ;-}

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

    Hi Chris !

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

    Merry Chrismas :)

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

  50. Permalink to comment#

    Awesome tutorial… Thanks to share…

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".