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 RUclips.
@@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 RUclips 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.
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!
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:)
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.
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 :)
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.
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 ..
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 ?
Who is styling the element, why not just simply use the and make it less complicated. Just got more confused. Everything else is fine, just why styling htlm when you do your work in body. By structure body holds lets say all the visual content, while head holds information about page for parser, and html holds head and body. Please explain...
Thanks a lot Victor! It doesn't happen on purpose, but we know each other for a long time and work together all day, so we kind of aligned the style a bit as it seems.
What if the body is position relative, but the inside child-elements are not positioned? In that case, what is the container of the child-elements? Is it the body or the html? I read somewhere that, if the body is positioned relative, and inside of it there is a child-element with height of 100 percent, the height would be relative to the body, but if the body is not positioned relative, then the height is relative to the html. I tried it, and it didn't work. Can you comment on that?
Lovely video. I would suggest talking slower when comparing and contrasting position: absolute and position: relative. For a beginner it's quite hard to follow.
Actually, it means a lot to me to read that the videos are helpful Khadar, so thank you very much for your awesome feedback! I'l try my best to keep it up :)
That's just awesome to read, thank you for your support! In case you generally want to have an overview of all our content, our website makes finding the right topics a bit easier. No matter if you are looking for Udemy courses ( academind.com/learn/our-courses ) or our entire content ( academind.com/learn )
So: why refers the "position absolute" command to the html element? can't be, because its the conatining element, because it's not. Could one say, that "position absolute" refers to the highest element in the DOM, if there is'nt any containing element given a position property? because if we appy position: absolute to the body element, the position absolute from the header element refers to body, as the containing element.
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 RUclips.
@@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 RUclips 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.
Two years and three months old - and still the clearest video to explain positioning. Outstanding!
Thank you so much Rick!
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 RUclips 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.
thanks for this tutorial i have watch so many position css tutorials and yours is the best
Thank you. This made it clearer for me with regard to your comments about he relative positioning, containing element, viewport etc.
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!
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!
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.
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!
Best explanation I have ever had. Thank you.
Watched it twice and seemed a bit clearer. Ty
Such am amazing tutorial. Answering the question that come to mind when you are a beginner:
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 :)
I am really grateful Academind, I am no longer confused! Blessings!
Happy to read that Andrew, thank you!
You are amazing! This has helped me so much.
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!
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.
Clear as crystal explanation
Thank you so much :)
Thanks. I didn't understand a thing from this video.
Thank you very much , the best explanation on RUclips
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 :)
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 tutorial my guy it was totally wicked!
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!
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?
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!
Very very well explained.
Now ,I understood all the things about the positions.
thank you very much sir for this lecture.
Your CSS explanation was great👍🏻
Great video. Perfect pace and very articulate.
Thank you very much for this super concise video with a crystal clear explanation. Finally, I'm able to understand CSS positioning.
Absolutely Rocking!!
Thank you, this was very helpful.
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
if you wanted to confuse the viewers the video is perfect !
After seeing your comment, I will never take a risk
position:relative;
isn't taken out the document flow, but it can be manipulated with top, bottom, left, right
thank you sir now I am clear with position
One of the best guides about css positioning. Thank you!
That's so great to read Christopher, thank you very much!
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!
Just what I needed, thank you so much !
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.
It's great explanation and covering all concepts ❤️ lots of love ❤️👍
Very well explained. Thanks a lot
Great Explaination!! God bless you man! ❤
Cheers mate. Very helpful compared to FCC shoddy and terse explanation
baam ,.....this concept is so daam awesome bro .
I watched this video from start to finish! Super helpful!
Awesome to read that Kaleb, thanks for this wonderful feedback!
Thank you for a fantastic explanation, clear and really for beginners.
Excellent presentation. Thanks.
Very Well-Explained My Friend
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
really good teaching skills! very clear i understood everything
Thank you for explaining the meaning of position! It helped a lot
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!
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 ..
great video! I finally got the concept
How do you define 'it gets excluded from the normal document flow' ? Community please help me understand ? I'm new to this .
best tutorial about position on youtube. thank you)
That's so cool to read, thanks a lot for your wonderful comment!
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 ?
Who is styling the element, why not just simply use the and make it less complicated. Just got more confused. Everything else is fine, just why styling htlm when you do your work in body. By structure body holds lets say all the visual content, while head holds information about page for parser, and html holds head and body. Please explain...
Thanks a lot for this video! You explained awesome.
Thank you. You're really good at teaching. Appreciate it.
Thank you very much for this great feedback Shibunath!
wow the way you teach this lesson is so nice well defining.I really looking forward for more vidoes.
Thank you so much Ganguli!
around 6:20 to 6:30, how is the container of the element, rather than the element?
GREAT !!! Thank you so much for these awesome videos ! I'm learning so much with them !!!
Thanks so much, so cool to read that :)
Awesome content! I am doing Max's Angular Course. I am surprised how you two present almost equal each other. Are you brothers? Congrats.
Thanks a lot Victor! It doesn't happen on purpose, but we know each other for a long time and work together all day, so we kind of aligned the style a bit as it seems.
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!
very
useful information very much thank u
thank you!!! really great explanation
What if the body is position relative, but the inside child-elements are not positioned? In that case, what is the container of the child-elements? Is it the body or the html? I read somewhere that, if the body is positioned relative, and inside of it there is a child-element with height of 100 percent, the height would be relative to the body, but if the body is not positioned relative, then the height is relative to the html. I tried it, and it didn't work. Can you comment on that?
what is the use of static if it positions elements as normal? if its normal then not use static at all?
That was a great explanation! I've been 3 days trying to place a logo over my menu bar. I think the z-index might help me overlay.
Thank you very much Edward, really great to read that you like the video!
6:44 Why is header positioned relative to the HTML element instead of the BODY element? Isn't the BODY element the direct container?
Excellent tutorial. Thank you
how do you put a big banner vertical on the Right of everything??
Thanks so much man! that was really helpful!
Position is old school.
Grid is the best ✌
Well that solved that forever, great explanation!
Happy to read that Figgus, thank you!
This video was so helpful, thank you sooo much
VERY good, thanks. Subscribed.
Thank you Ricardo, great to have you on board!
thanks, men! its helped me a lot
finally, I understand this topic
liked & subscribed
Thank you Vadim, great to have you on board!
I wish things were explained this way, with the reasons why we do things in a certain way.
Lovely video. I would suggest talking slower when comparing and contrasting position: absolute and position: relative. For a beginner it's quite hard to follow.
Keep up the good work means little to you but it really helps many that you put out what you know :)
Actually, it means a lot to me to read that the videos are helpful Khadar, so thank you very much for your awesome feedback! I'l try my best to keep it up :)
Thank you!
Thank you! Very helpful!
Have just known that you have extra courses on Udemy. No matter to wait - just going to buy it
That's just awesome to read, thank you for your support! In case you generally want to have an overview of all our content, our website makes finding the right topics a bit easier. No matter if you are looking for Udemy courses ( academind.com/learn/our-courses ) or our entire content ( academind.com/learn )
So: why refers the "position absolute" command to the html element? can't be, because its the conatining element, because it's not. Could one say, that "position absolute" refers to the highest element in the DOM, if there is'nt any containing element given a position property? because if we appy position: absolute to the body element, the position absolute from the header element refers to body, as the containing element.
Clear explanation!
Thanks a lot.
Thank YOU for your comment!
great video, well explained!
watching from Bangladesh
THANKS A TON, brother.
Thank you, that was very helpfull
liked very much . awesome explanation !!!
simple explanation
Thank you dude ! Very good explanation
Great to read that you liked the video, thank you Youssef!
Thank you very much! Awesome tutorial
It makes me very happy to read that Dimon, thank you for your comment!
Awesome tutorial, thank you!
Thank YOU for your awesome comment Matús, it's just fantastic to get such a great feedback!