HomeОбразованиеRelated VideosMore From: LearnWebCode

CSS Absolute and Relative Positioning Tutorial

3386 ratings | 207518 views
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: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF 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: http://learnwebcode.com/web-hosting/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (479)
djpepino1982 (13 days ago)
BEST EXPLANATION EVER!!! :) THANKS
Diego Raffa (2 months ago)
When the teacher explained this topic in class I couldn't understand so much. Now it's starting to be more clear Thanks for the tutorial!
Tomi D (2 months ago)
The best video about pisitioning EVER! So simple and clear explained. Finnaly I get it! Tnx!!
piano0011 Lee (2 months ago)
Hello! I should have watched some videos a while ago on this but almost all of my positioning have a absolute attribute, is this wrong? It seems that relative is more commonly used...
Harold McBroom (3 months ago)
Thanks for the video, was very helpful :)   I do have a question.  I'm using Notepad++ with Internet Explorer 11 under Windows 7, as it's the easiest method I've found for dealing with HTML and CSS; All these so-called "free" website builders only add complication and limits.  ...but how did you move that photo into that position on the screen and have it stay there?  When I tried to do the same thing, my mouse would not drag the image object, nor allow me to interact with it?  Is this a Google Chrome thing?
Roland Arriesgado (3 months ago)
Precise tutorial sir. Do you have a codepen for html and css for this lesson? I love to experiment your lessons
Monica Brown (4 months ago)
please can i have your contact [email protected]
ramin alikhani (4 months ago)
This video omits a very important matter. Relative to what?! You didn't bother to say we move the element in relation with the container that that element is within.
Shubhang Tomar (4 months ago)
Thank you matey... cleared lots of doubts...
Aashay Amballi (4 months ago)
Great tutorial...
Ankur Dutta (5 months ago)
Ah haa! :p Thank you ;}
Jon Sanchez (5 months ago)
how can I make that when i shortened my screen the images dont stay put in the same place and rather move along with the page?
Bibek Grg (6 months ago)
Really just had a clear understanding of css positioning relative and absolute. Thanks man, It is really my aha moment after watching this.
E S (6 months ago)
Learning web development and web design for more than a year now - for the first time I finally understand it. thank you!
Sans Red (5 months ago)
E S 😂😅
Nightstalker350119 (7 months ago)
Wow you made it so simple!
Titu Baroi (7 months ago)
Very clear Thanks
deepesh dang (7 months ago)
no wonder - super crisp !
Amy Picton (7 months ago)
Very clear explanation. I finally get it! Thank you!
Jignesh kumar (7 months ago)
Why don't u talk about z-index?
Neeraj Mahapatra (7 months ago)
superb it makes crystal clear man
Akhil Murali (7 months ago)
Thank you, Sir My doubt is almost clear
Rushikesh Shinde (8 months ago)
Actually this was Aha moment,thank u
Catallo Jer (8 months ago)
oh my god . i read the tutorial about position in w3schools over and over and i did not get it but when i watched this video its clearly as day . thanks for the video dude
Hapri Fud (8 months ago)
thank you so much!!
Ashton111110 (8 months ago)
I never used position absolute or relative because I didn't understand it. But now I do thanks to you.
Shoaeeb Osman (9 months ago)
thanks man that was the best tutorial
Glory Up Media (9 months ago)
Bruh, you changed my life! Why can't everyone keep it this simple! You need a Noble Peace Prize!
Ovie Olori (9 months ago)
Hands down the best explanation on the subject. Thanks a lot, you bettered my understanding on CSS positioning
DILJOT SINGH (9 months ago)
truly an AAHA! moment
onur oku (10 months ago)
still the best explanation in 2018
Mark Carlyon (10 months ago)
When I try moving things with position relative it won't place them over other elements as in your example - it will always maintain normal flow. So if I position an element 5px from the top then that element will be moved 5px away from whatever comes before it, not from the actual page.
bedeccus (10 months ago)
the best tutorial about the topic : clear, concise, AND just long as necessary /no crap sales pitching or pathetic "hip"articulations.
Sherpa man (11 months ago)
Thank you very much for this video
Shilpi Jain (11 months ago)
Awesome explaination... Do u have text documnets of these video?
stormyweathers08 (11 months ago)
No matter what I do, setting a numerical value for width and height, the background colour doesn't fill the container; it just surrounds the text. Moreover, again, even after setting the width and length, the div container runs the entire length of the screen!
Mark Hermano (11 months ago)
thank u good sir!
mukeshwar singh (1 year ago)
Very great 👌
Mirajul Momin (1 year ago)
Nice Explanation. Subscribed!
Touch Sopheavireak (1 year ago)
and what about when we use in the element with border
Joseph Ozurumba (1 year ago)
Thank you for this video. This is awesome!
Yordan Kondov (1 year ago)
This is the best tutorial I have ever seen!!!!! Could you make a tutorial about transfrom and transition and how we can make simple animations with them?
Kuok Loong Chen (1 year ago)
your voice like Thomas Brodie-Sangster from the maze runner, i love your voice when you explain it make me feel more concentrate and now i able to understand.
Rohan Mahajan (1 year ago)
Saw this video after watching 5-6 videos on CSS position but gain nothing..and u just clear all my doubts regarding CSS positions... Subscribed....keep posting web dev videos and made it easy for me...
Din Amri (1 year ago)
crystal clear!!!! amazing!!! thank you : )
am watching this in 2018.....i must say dis is d best explanation ever...... thanks bro..i learnt alot
Ty it helped me alot :)
pouvoir Cerveau (1 year ago)
thanks man , you have explained it in a very good way ,but I have a question , you know when you set an element to pisition absolute its parent becomes with no width because it becomes no longer in the flow even if I gave it the clearfix solution it doesn t work because the element is not floated is there a solution to this .
Boza Design (1 year ago)
Best explanation on youtube! ;)
Epic php (1 year ago)
AHA ty
Jonathan Ofere (1 year ago)
ok i gotch ya
C Thomas (1 year ago)
Thank you, it was an ah ha moment, you are the first person that really explained this, and I feel I understand this concept now!
sophanith hok (1 year ago)
Woww!!!!Amazing!!
Gulf /delta (1 year ago)
You did a great job man, thank a lot.
iMpetus (1 year ago)
Doesn't absolute position to the nearest positioned element and not the parent element?
Abdus Samad (1 year ago)
It helped me a lot,thanks brother..
skitz :] (1 year ago)
clearly explained. learning css on sololearn atm and the tutorial for it wasnt that clear. at least they didnt give good examples. tryied it in code playground but still didnt understood that right. you helped me out bro, thanks for this tutorial! :D
tenzin dakar (1 year ago)
perfect
Rakib Hasan (1 year ago)
very helpfull tutorial
Piyush Chauhan (1 year ago)
in this video, if i want to hide the half part of an image behind the container then what will be i do?
Al Barleta (1 year ago)
Use clipping: overflow: hidden; https://www.w3schools.com/css/css_overflow.asp
aziz as (1 year ago)
thank you
Sam Al (1 year ago)
Thanks for the great example, you really clear my thoughts about it👍🏼
Thanks a lot!
Technical Boss (1 year ago)
div
amarc. (1 year ago)
Finally!
Rock139 (1 year ago)
Thank you for addressing that question about the container. It's those types of insturctions that make good tutorials.
p4ssi (1 year ago)
thanks! helped alot!
ASIF KAMRAN MALICK (1 year ago)
Thanks a ton, Brad. This was really to the point. I wish you success in your life.
Blake Johnson (1 year ago)
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?
Hitesh Khatri (1 year ago)
best tutorial
Phillip Han (1 year ago)
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!
rayjens code (1 year ago)
thanks :D
Ranjith Paruchuri (1 year ago)
nicely explained. i had some confusion regarding the positions!! now its clear
shankar lingam (1 year ago)
wow moment yes graped it thanks dude !!
anixi85 (1 year ago)
i read about pisition in css and watched videos on russian and english. at least i found the clear explanation. thank you a lot!
Jousboxx (1 year ago)
Woah this is exactly what I was looking for. Thanks!!!
Tony BP (1 year ago)
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.
Petrockspiracy (1 year ago)
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.
Nischal Dutt (1 year ago)
Atlast!! after watching tons of tutorials on this small topic this was the one and it literally was the ahh !! moment for me 😅😁👍 great work buddy
Elias Housseini (1 year ago)
ahaaaaaaaaaaaa :3
Hanley Charles (1 year ago)
thanks for simplifying this for me it was really helpful
sfa20 (1 year ago)
Awesome video dude, your definitely right with saying it's an Aha! moment, Explains positioning very clearly
Gortex Wrecker (1 year ago)
What's the difference between top: 20px; and margin-top: 20px; ?
kaiser (1 year ago)
when i was starting I also thought relative and absolute positioning were also trash ^^
Aryan vedh (1 year ago)
Can you please make a tutorial of wordpress on build in header slide?
X Xxibdrgn (1 year ago)
aha. very clear
Diego Andrade (1 year ago)
I've logged on just for like your video. THANK YOU. For real.
arthur jake (1 year ago)
Thanks for the help☺️
XerosXIII (1 year ago)
I "AHA" so hard on this... after close to 2 years in web dev :x
funnybrokenfool (1 year ago)
OMG! Thank you! Spent ages trying to figure this out!
James Walsh (1 year ago)
bot-tom
Horsegirl505 (1 year ago)
I love the positive attitude with which you approach the different subjects you teach. I really enjoy listening to your videos and hope to learn more. I'm going to subscribe to your channel. Thank you, and keep up the great work!
Joel Rhenisch (1 year ago)
very well explained, thanks
Yevhen Logosha (1 year ago)
a-ha!!! awesome, thanks!
microengine Nig. ltd (1 year ago)
i Like the simplicity with which you explain in youtube. Could you plz do a video on Python from basic to professional. (may be python and mysql in developing app like comment/opinion analysis) It would b very useful for my thesis work. thnx waiting...
microengine Nig. ltd (1 year ago)
i Like the simplicity with which you explain in youtube. Could you plz do a video on Python from basic to professional. It would b very useful for my thesis work. thnx waiting...
Suresh (1 year ago)
aha..!
Shovon Costa (1 year ago)
wow.... great understanding
Alex Alexson (1 year ago)
Merci beaucoup.
Pa Pinkelman (1 year ago)
exellent editing... comfortable to watch. Good way of explaining.
naspy971 (1 year ago)
Really nice !

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.