CSS Absolute and Relative Positioning Tutorial

In this CSS tutorial we cover both absolute and relative positioning and how the two interact with each other. Check out my “Get a Developer Job” course:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

20 responses to “CSS Absolute and Relative Positioning Tutorial”

  1. Blake Johnson Avatar

    Good video. One question though:

    What if you have already added 'position: relative' as a property on the container for the purpose of moving the container in a direction, but one of the child elements you wish to give position:absolute to the corner of the page i.e. to not honor it parent element in positioning. Because you have given relative to the container this would then mean that any child of that element will be locked in position to it. Is this correct?

  2. Phillip Han Avatar

    Hello can you make an tutorial for multiple container with border outline medium, solid, 1px black? please
    im having a problem to align them properly. thanks!

  3. Ranjith Paruchuri Avatar

    nicely explained. i had some confusion regarding the positions!! now its clear

  4. shankar lingam Avatar

    wow moment yes graped it thanks dude !!

  5. anixi85 Avatar

    i read about pisition in css and watched videos on russian and english. at least i found the clear explanation. thank you a lot!

  6. Jousboxx Avatar

    Woah this is exactly what I was looking for. Thanks!!!

  7. Tony CL Avatar

    I've watched many videos regarding this subject… this video was made in 2011 and it's the one that did it for me; and yes, I did have an "a-ha" moment. Thanks.

  8. Petrockspiracy Avatar

    THANK YOU I just wanted to move an image in line with text!!

    Also I don't really understand why it's in relation to the container element.

  9. Hanley Charles Avatar

    thanks for simplifying this for me it was really helpful

  10. sfa20 Avatar

    Awesome video dude, your definitely right with saying it's an Aha! moment, Explains positioning very clearly

  11. Gortex Wrecker Avatar

    What's the difference between top: 20px; and margin-top: 20px; ?

  12. kaiser Avatar

    when i was starting I also thought relative and absolute positioning were also trash ^^

  13. Aryan vedh Avatar

    Can you please make a tutorial of wordpress on build in header slide?

  14. Diego Andrade Avatar

    I've logged on just for like your video. THANK YOU. For real.

  15. arthur jake Avatar

    Thanks for the help☺️

  16. XerosXIII Avatar

    I "AHA" so hard on this… after close to 2 years in web dev 😡

Leave a Reply

Your email address will not be published. Required fields are marked *