As someone with prior knowledge of positioning, I feel like this is a good video for people with (at least basic) understanding of these concepts, but not such a clear explanation for beginners.
"Beginner" doesn't mean who knows nothing and he is seeing CSS for the first time. But sure you must have the least knowledge, but talking about positioning in CSS, it is really clear!
@@whynot114 That is true, however, there might be beginners who are dealing with positioning for the first time and came straight to this video. I just wouldn't want them to be discouraged, as there are indeed better explanations available on UA-cam.
@@Violinistkinja90 I'm one of those "beginners" you're talking about. I never deal with positioning before. I read a lot of articles and watched dozens of UA-cam videos, but none of them makes sense enough for me, until I met this video. From all CSS positioning videos I've ever watched, this is the one that opened my mind. I grasped the fundamentals almost immediately . If you do know videos that provide better explanation, please let me know. However, I doubt I haven't watch them.
I've learned four main points from this video: - Absolute position is when an element has a position with respect to a reference value which this also defines by the container where this element placed in. - Relative position is something that although the position of an element changes according to its reference, the initial placeholder of the element does not move. This leads the order of other elements does not change with respect to the initial status while in the case of absolute positioning by changing the position of an element, the order of the other elements changed. - The fixed position is useful when we like to have a navigation bar stick on our webpage and does move up and down with scrolling the web. - The last but not the least is regarding the z-index where the order of elements with respect to z-axis defines for the webpage. Thank you to teach me these four points.
You explained it as if I am a child.... your method of teaching by actually showing pictures is very good, this is what made me understand... I saw many videos, but everyone just went through webpages, and thus I got more confused. Thank you.
the best ever video that could explain in detail the concept of position in css. Thanks a lot, please try uploading more videos like that for display and other topics as well.
usualy after seeing any video if i dont understand i go to different video but after seeing this video there is no need to do that. its simple and straight to point. thank you so much:)
Thank you so much for making this video!! I tried learning the concept off of other tutoring sites but it just didn't make sense what so ever. Watching you explain it the way that you did finally made it click in my brain. Saving this video for future reference. Again, thank you!
11:30 or can we say that w/ position: absolute; on body, the positioning is in reference to the whereas w/ position: relative; on body, the positioning is in reference to ?
Man, I've just started learning about HTML+CSS and that was one of my biggest doubts. And it's just the first video that I watch from you haha. Goddamit, I think I'm gonna learn alot with this channel. I'm so happy hahaha Thank you so much man. Best video I've ever seen about this subject.
Thanks so much for this awesome feedback Fernando, great to have you on board of the channel! If you're looking for more resources and also some articles, you can find these on our website: academind.com/learn
I've been learning HTML and CSS for about a month now, on my own. This video has really helped clarify positioning for me in ways that other videos just glossed over with a lot of presumption. So thank you for that. But I have one concept that am unclear about and have never found an explanation. I am diving into the deep end with my first attempt at a website by trying to make it scale to any screen/device size. I hope I can clearly describe this so that maybe you can explain if "fixed" positioning is the way to go. (I'm basing my description of the layout based on a desktop computer monitor, not a smart phone or tablet.) I have a background image that will take the top two thirds of the screen, and it has a column of four words one atop the other (left-justified) at a very specific place on the image. The bottom third of the screen is split into three areas - a text area on the left, a logo in the middle, and the navigation menu on the right. The navigation menu, also left-justified, is exactly aligned with the column of words positioned on top of the image. My question is, how do I implement the ability to scale so that the column of words remains in the exact same place over the scaled image, while also having the navigation menu and the column of words remain aligned? Many thanks in advance for any help.
I know this vid is a bit too old, but I want to clarify on 10:25, after you applied top: 0; to the body element, and I think in the first place that it's not gonna work even if you declared position: relative; but then, I saw the cause, you set padding: 10px on the html element and that's the white space outside the body element you saw :)
Hi Akshit, do you refer to what I'm saying at 6:30? There, we use position: absolute for our 'header', which turns our 'html' element into the containing element for 'header' from a positioning perspective (that's the default behaviour of position: absolute). As soon as we add a position property to 'body', this becomes the containing element of the 'header'.
Academind Ahh, I got it. If there's no position property defined in any up level element of an element that has position defined, 'html' will be the containing element. But if any of the up level elements (the nearest one) have position property defined, that particular element will act as the container. Watching the video again made more sense now. Thank you very much for these videos, and also for responding. It would be very nice if we can have a CSS grid tutorial in future.
this is a free course in udemy fro javascript and php and ajax: www.udemy.com/make-a-translation-website-javascriptajaxphp-mysql/?couponCode=GOOGELETRANSLATE_89
Thanks so much! We actually got a full free CSS series (academind.com/learn/css/beginner-s-guide/) and a 20h+ course => www.udemy.com/css-the-complete-guide-incl-flexbox-grid-sass/?couponCode=ACAD_W
Could you detail that why the header element is shrink when the display property is absolute in the header element. ? (while we inspect why it doesn't takes its own 100% of its width as a block element ?) but it clearly mentions that it is a block element in the inspect (display property). Thank you ..
Hi, is there a way I can add an image in a div that has 6px 0px padding and make the image overlay on the row? So far I am only seeing the image contained inside of div and only seeing partial image. Thanks!
Two years and three months old - and still the clearest video to explain positioning. Outstanding!
Thank you so much Rick!
As someone with prior knowledge of positioning, I feel like this is a good video for people with (at least basic) understanding of these concepts, but not such a clear explanation for beginners.
I think it's pretty good for beginners, at least better than most out there.
"Beginner" doesn't mean who knows nothing and he is seeing CSS for the first time. But sure you must have the least knowledge, but talking about positioning in CSS, it is really clear!
@@whynot114 That is true, however, there might be beginners who are dealing with positioning for the first time and came straight to this video. I just wouldn't want them to be discouraged, as there are indeed better explanations available on UA-cam.
@@Violinistkinja90 I understand 🙂
@@Violinistkinja90 I'm one of those "beginners" you're talking about. I never deal with positioning before. I read a lot of articles and watched dozens of UA-cam videos, but none of them makes sense enough for me, until I met this video.
From all CSS positioning videos I've ever watched, this is the one that opened my mind. I grasped the fundamentals almost immediately .
If you do know videos that provide better explanation, please let me know. However, I doubt I haven't watch them.
I've learned four main points from this video:
- Absolute position is when an element has a position with respect to a reference value which this also defines by the container where this element placed in.
- Relative position is something that although the position of an element changes according to its reference, the initial placeholder of the element does not move. This leads the order of other elements does not change with respect to the initial status while in the case of absolute positioning by changing the position of an element, the order of the other elements changed.
- The fixed position is useful when we like to have a navigation bar stick on our webpage and does move up and down with scrolling the web.
- The last but not the least is regarding the z-index where the order of elements with respect to z-axis defines for the webpage.
Thank you to teach me these four points.
Burfect!
Amazing man, even the top guys from UA-cam failed to explain it better!
This was an amazing tutorial! I always struggled with absolute and relative positioning. This really explained it well!
Just what I needed, I was struggling to understand those 3 and where they should be used.
i thought i was alone this video really helped me too.
Watched it twice and seemed a bit clearer. Ty
thanks for this tutorial i have watch so many position css tutorials and yours is the best
Your CSS explanation was great👍🏻
I am really grateful Academind, I am no longer confused! Blessings!
Happy to read that Andrew, thank you!
How come no one else explains it like that? This channel is the best!
Thanks so much for your awesome feedback Fred, this really means a lot to us!
You explained it as if I am a child.... your method of teaching by actually showing pictures is very good, this is what made me understand... I saw many videos, but everyone just went through webpages, and thus I got more confused. Thank you.
Glad it was helpful!
the best ever video that could explain in detail the concept of position in css. Thanks a lot, please try uploading more videos like that for display and other topics as well.
Thank you. This made it clearer for me with regard to your comments about he relative positioning, containing element, viewport etc.
You are amazing! This has helped me so much.
usualy after seeing any video if i dont understand i go to different video but after seeing this video there is no need to do that. its simple and straight to point. thank you so much:)
Wow, what more can I write but thank you very very much for sharing this fantastic feedback! This honestly means a lot to me :)
Best explanation I have ever had. Thank you.
Woooooo finally..... I found a great video. You don't know how badly i was confused in all these positions. Now I get it. Thank You Very Much....💗💗💗💗💗
Glad it helped, thank you Niket!
Thank you very much , the best explanation on UA-cam
Such am amazing tutorial. Answering the question that come to mind when you are a beginner:
Clear as crystal explanation
Thank you so much :)
Great video. Perfect pace and very articulate.
Thank you so much for making this video!! I tried learning the concept off of other tutoring sites but it just didn't make sense what so ever. Watching you explain it the way that you did finally made it click in my brain. Saving this video for future reference.
Again, thank you!
Thank you very much Javin, happy to read that the video was helpful for you!
It's great explanation and covering all concepts ❤️ lots of love ❤️👍
Thank you very much for this super concise video with a crystal clear explanation. Finally, I'm able to understand CSS positioning.
Very very well explained.
Now ,I understood all the things about the positions.
thank you very much sir for this lecture.
After all the time I've spent with css. Position was the one thing that always eluded me. Even after I learned flex and grid.
that's great , i haven't seen any tutorial on youtube with such detailed explanation
Awesome to read that Mani, thanks a lot for your fantastic feedback!
Best explanation I've come across about position property. Now I finally get it, thanks a lot!
Simply awesome to read that Damián, thanks so much!
Thank you for a fantastic explanation, clear and really for beginners.
Just what I needed, thank you so much !
Absolutely Rocking!!
Great Explaination!! God bless you man! ❤
I watched this video from start to finish! Super helpful!
Awesome to read that Kaleb, thanks for this wonderful feedback!
around 6:20 to 6:30, how is the container of the element, rather than the element?
One of the best guides about css positioning. Thank you!
That's so great to read Christopher, thank you very much!
Best video I have seen so far that explains the different positions in CSS. Subscribing to your channel now!:)
Thanks so much for your awesome feedback and support Darrell, happy to have you on board!
Very very clear explanation and example. This should be enough to accurately get the difference.
Thank you very much for your comment and your great feedback Ganesh, happy to read that the video was helpful for you!
Very Well-Explained My Friend
Thank you, this was very helpful.
Excellent presentation. Thanks.
6:44 Why is header positioned relative to the HTML element instead of the BODY element? Isn't the BODY element the direct container?
11:30 or can we say that w/ position: absolute; on body, the positioning is in reference to the whereas w/ position: relative; on body, the positioning is in reference to ?
baam ,.....this concept is so daam awesome bro .
Man, I've just started learning about HTML+CSS and that was one of my biggest doubts. And it's just the first video that I watch from you haha. Goddamit, I think I'm gonna learn alot with this channel. I'm so happy hahaha Thank you so much man. Best video I've ever seen about this subject.
Thanks so much for this awesome feedback Fernando, great to have you on board of the channel! If you're looking for more resources and also some articles, you can find these on our website: academind.com/learn
thank you sir now I am clear with position
Great video! This css positioning madness is why when I copy paste SO css solution it never works as I intended 😀😀😀 It’s all about the context!🙏🙏🙏🙏🙏
great video! I finally got the concept
I've been learning HTML and CSS for about a month now, on my own. This video has really helped clarify positioning for me in ways that other videos just glossed over with a lot of presumption. So thank you for that. But I have one concept that am unclear about and have never found an explanation.
I am diving into the deep end with my first attempt at a website by trying to make it scale to any screen/device size.
I hope I can clearly describe this so that maybe you can explain if "fixed" positioning is the way to go. (I'm basing my description of the layout based on a desktop computer monitor, not a smart phone or tablet.)
I have a background image that will take the top two thirds of the screen, and it has a column of four words one atop the other (left-justified) at a very specific place on the image.
The bottom third of the screen is split into three areas - a text area on the left, a logo in the middle, and the navigation menu on the right.
The navigation menu, also left-justified, is exactly aligned with the column of words positioned on top of the image.
My question is, how do I implement the ability to scale so that the column of words remains in the exact same place over the scaled image, while also having the navigation menu and the column of words remain aligned?
Many thanks in advance for any help.
thank you!!! really great explanation
really good teaching skills! very clear i understood everything
best tutorial about position on youtube. thank you)
That's so cool to read, thanks a lot for your wonderful comment!
Thanks. I didn't understand a thing from this video.
Excellent tutorial. Thank you
Wow well explained brother
very
useful information very much thank u
VERY good, thanks. Subscribed.
Thank you Ricardo, great to have you on board!
Well that solved that forever, great explanation!
Happy to read that Figgus, thank you!
Very good explanation. Thank you!
Great to read that Hugo, thank you for your comment!
wow the way you teach this lesson is so nice well defining.I really looking forward for more vidoes.
Thank you so much Ganguli!
thanks, men! its helped me a lot
finally, I understand this topic
liked & subscribed
Thank you Vadim, great to have you on board!
Thank you very much! very helpful!
That's awesome to read, thank you Chris!
awesome! very clear explanation
Thank you Dave!
I know this vid is a bit too old, but I want to clarify on 10:25, after you applied top: 0; to the body element, and I think in the first place that it's not gonna work even if you declared position: relative; but then, I saw the cause, you set padding: 10px on the html element and that's the white space outside the body element you saw :)
Thank you for explaining the meaning of position! It helped a lot
How do you define 'it gets excluded from the normal document flow' ? Community please help me understand ? I'm new to this .
Clear explanation!
Thanks a lot.
Thank YOU for your comment!
Thank you. You're really good at teaching. Appreciate it.
Thank you very much for this great feedback Shibunath!
Hi Manuel, I am confused when you say the container element of 'header' is 'html,' but it should be 'body,' I guess.
Hi Akshit, do you refer to what I'm saying at 6:30? There, we use position: absolute for our 'header', which turns our 'html' element into the containing element for 'header' from a positioning perspective (that's the default behaviour of position: absolute). As soon as we add a position property to 'body', this becomes the containing element of the 'header'.
Academind Ahh, I got it. If there's no position property defined in any up level element of an element that has position defined, 'html' will be the containing element. But if any of the up level elements (the nearest one) have position property defined, that particular element will act as the container. Watching the video again made more sense now. Thank you very much for these videos, and also for responding. It would be very nice if we can have a CSS grid tutorial in future.
this is a free course in udemy fro javascript and php and ajax:
www.udemy.com/make-a-translation-website-javascriptajaxphp-mysql/?couponCode=GOOGELETRANSLATE_89
I'm still confused.
That means you're right on track.
@@jkovert You are right. Being confused is part of the learning process. It's more of a stepping stone than a stumbling block.
What part are you having trouble with? I can explain it to you in a way you'd understand. I'd know because I was in your place a couple of months ago
@@nvmffs plz make a video and upload on your channel we will watch that
How about know?
Thank you dude ! Very good explanation
Great to read that you liked the video, thank you Youssef!
Your video is AMAZING!!! Thank you! Can you also make a video where you explain ALL of CSS at this level please?
Thanks so much! We actually got a full free CSS series (academind.com/learn/css/beginner-s-guide/) and a 20h+ course => www.udemy.com/css-the-complete-guide-incl-flexbox-grid-sass/?couponCode=ACAD_W
great video, well explained!
GREAT !!! Thank you so much for these awesome videos ! I'm learning so much with them !!!
Thanks so much, so cool to read that :)
meaningfull to learn from this tut video..thanks.
Happy to read that, thanks a lot!
This video was so helpful, thank you sooo much
Cheers mate. Very helpful compared to FCC shoddy and terse explanation
if you wanted to confuse the viewers the video is perfect !
After seeing your comment, I will never take a risk
Thanks a lot for this video! You explained awesome.
very clear explanation
Thank you!
Could you detail that why the header element is shrink when the display property is absolute in the header element. ? (while we inspect why it doesn't takes its own 100% of its width as a block element ?) but it clearly mentions that it is a block element in the inspect (display property). Thank you ..
Good explanation
Thanks a lot man. Helped a lot! Cheers.
Thanks so much man! that was really helpful!
Which ide does he use?
I use Visual Studio Code.
Awesome tutorial, thank you!
Thank YOU for your awesome comment Matús, it's just fantastic to get such a great feedback!
You are really genius , sir.💕❤💕
This means so much to me Aliul, thanks a million :)
That was awesome .Thank you! Finally I understood how it works!
So happy to read that the video was helpful for you Kakto, thanks a lot for your comment!
Amazing. It helped me a lot❤️
Really understandable !! Thanks a lot
Thank you Trung :)
Thank you! Very helpful!
liked very much . awesome explanation !!!
how do you put a big banner vertical on the Right of everything??
position:relative;
isn't taken out the document flow, but it can be manipulated with top, bottom, left, right
what is the use of static if it positions elements as normal? if its normal then not use static at all?
Hi, is there a way I can add an image in a div that has 6px 0px padding and make the image overlay on the row? So far I am only seeing the image contained inside of div and only seeing partial image. Thanks!
Useful, thanks again guys!
Thank YOU for your amazing support Josh!
Thank you very much! Awesome tutorial
It makes me very happy to read that Dimon, thank you for your comment!
Thank you
Very helpful
thanks man ,it was a complete tutorial❤
Awesome to read that Hamed, thank you!