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

CSS Absolute and Relative Positioning Tutorial

3550 ratings | 213506 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 (457)
Kitten (1 month ago)
Is it considered good practice to use positioning for responsive web pages? Or would it mess up the layout when the window is being resized?
Zlatko Zeco (1 month ago)
Thx, very clear explained ...
Syed wasay (1 month ago)
tysm mate great explanation
Pakistani Gamer (1 month ago)
Thank you very much man you're an awesome person who apparently helped me alot <3 ! thanks again bro
SaLeH Ali (2 months ago)
Very useful thx
Iman Moodi (3 months ago)
thanks man. great video
djpepino1982 (3 months ago)
BEST EXPLANATION EVER!!! :) THANKS
Diego Raffa (1 month ago)
When the teacher explained this topic in class I couldn't understand so much. Now it's starting to be clear Thanks for the tutorial!
Tomi D (5 months ago)
The best video about pisitioning EVER! So simple and clear explained. Finnaly I get it! Tnx!!
piano0011 Lee (6 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 (6 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 (6 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 (7 months ago)
please can i have your contact [email protected]
ramin alikhani (7 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.
Web Help (8 months ago)
Thank you matey... cleared lots of doubts...
Aashay Amballi (8 months ago)
Great tutorial...
Ankur Dutta (8 months ago)
Ah haa! :p Thank you ;}
Jon Sanchez (8 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 Gurung (9 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 (9 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 (9 months ago)
E S 😂😅
Nightstalker350119 (10 months ago)
Wow you made it so simple!
Titu Baroi (10 months ago)
Very clear Thanks
deepesh dang (10 months ago)
no wonder - super crisp !
Amy Picton (10 months ago)
Very clear explanation. I finally get it! Thank you!
Jignesh kumar (10 months ago)
Why don't u talk about z-index?
Neeraj Mahapatra (10 months ago)
superb it makes crystal clear man
Akhil Murali (11 months ago)
Thank you, Sir My doubt is almost clear
Rushikesh Shinde (11 months ago)
Actually this was Aha moment,thank u
Catallo Jer (11 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 (11 months ago)
thank you so much!!
Ashton111110 (1 year ago)
I never used position absolute or relative because I didn't understand it. But now I do thanks to you.
Shoaeeb Osman (1 year ago)
thanks man that was the best tutorial
Glory Up Media (1 year ago)
Bruh, you changed my life! Why can't everyone keep it this simple! You need a Noble Peace Prize!
Ovie Olori (1 year ago)
Hands down the best explanation on the subject. Thanks a lot, you bettered my understanding on CSS positioning
DILJOT SINGH (1 year ago)
truly an AAHA! moment
onur oku (1 year ago)
still the best explanation in 2018
Mark Carlyon (1 year 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 (1 year ago)
the best tutorial about the topic : clear, concise, AND just long as necessary /no crap sales pitching or pathetic "hip"articulations.
Sherpa man (1 year ago)
Thank you very much for this video
Shilpi Jain (1 year ago)
Awesome explaination... Do u have text documnets of these video?
stormyweathers08 (1 year 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 (1 year 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 : )
Forn Tainment (1 year ago)
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!!
Hilal Shingal (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 (2 years ago)
aha. very clear
Diego Andrade (2 years ago)
I've logged on just for like your video. THANK YOU. For real.
arthur jake (2 years ago)
Thanks for the help☺️
XerosXIII (2 years ago)
I "AHA" so hard on this... after close to 2 years in web dev :x
funnybrokenfool (2 years ago)
OMG! Thank you! Spent ages trying to figure this out!
James Walsh (2 years ago)
bot-tom
Horsegirl505 (2 years 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 (2 years ago)
very well explained, thanks
Yevhen Logosha (2 years ago)
a-ha!!! awesome, thanks!
microengine Nig. ltd (2 years 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...

Would you like to comment?

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