Codecademy, Freecodecamp, Treehouse, major respects to these guys but you have explained it much clearer than they have. You’re examples were outstanding. I finally get it!! Thank you sir!!!
I notice some of the comments below say "awesome tutorial", and I agree whole heartedly! You're a virtual gold mine of information, and I hope you continue making videos on a regular basis. . .Thanks again.
Nicely explained. Thanks. Few points. * absolute: When no top/left/right/bottom(TLRB) are mentioned, the element stays where it would stay as if it was static. But it is not entering into the flow. When the TLRB are mentioned then it is relative to it's first relative ancestor. * fixed: Its not relative to the root element. But its relative to the window screen size. During scroll the root element is scrolling up, but the fixed element stays there.
I usually don't comment on youtube videos but, this tutorial was great. I like how you show everything in one screen instead of flicking back and fourth to show css results. took me a couple of days but i finally understand. Thanks
I seen this in 2017 before going to interview . positioning is the only question Interviewer asked me in css section and i gave these answers with same example and the interview went well . I got selected also . In my job i haven't touched css not even opened a css file my work is just did JavaScript . Today i am changing my job and going for interview came back here to recall positioning . Thanks sir really appreciate your time that you make tutorials
Your explanation helped me detect a lot of issues that were in the UI in a project I'm working on. There are just so many dirty hacks (guess and check) being used just to make the elements display properly. Thanks man! I was getting fed up reading junk on StackOverflow being voted as best answer, that encourages filthy work-arounds; absolutely horrible for responsive app design. It's things like this that makes me want to stick to back-end.
I have 2 questions: 1) 3:56 why does changing the second element to relative make it rise above and overlap the third element? I thought the order in which elements are stacked is determined by their order of appearance in the HTML. 2) 7:50 why does changing the second element to absolute cut off the red background except for where text is present?
1) position relative doesnt take it out of the its natural order but it allows it to move around its original position by using left, right , top, bottom . it also doesnt disturbs the other elements around it so it has to float on the top.
2) originally the element was like a block which means it covers the entire area, when you make it an absolute element its no longer behaves like a block so it only occupies the space of its content.
So if a elements position is absolute,,,it will float on top of everything and have a position relevant to the top left corner of its parent (IF its parent is relative)..and if its parent isnt relative,,it moves in relevance to the BODY's top left corner?
It is relative to the parent if the parent is not static. "Absolute: The element is positioned relative to its first positioned (not static) ancestor element"
From source: For an absolutely positioned element, where the left, top, etc. are calculated from depends upon the position property of the parent and grandparents of the element in question. If the parent of the element is a positioned element (meaning its position is set to anything except position:static), then an absolutely positioned child is positioned relative to that parents rectangle (or grandparent, or great-grandparent, etc). But if none of the parents are positioned elements, the child is positioned relative to the bounds of the document.
This video helped clarify the difference between status, relative, fixed and absolute - thanks. I do wish it would have shown how to make a page fit “snugly” under a menu header (for instance), so you could write one menu and have each following page section line-up beneath it (without overlap??) I guess I'll be working on that myself.... Good video though - keep-up the good work.
Very Nice, position element is hard tio understand, this is a good definition I found that might make it easier to understand: "What Is Absolute Positioning? This type of positioning allows you to place your element precisely where you want it. The positioning is done relative to the first relatively (or absolutely) positioned parent element. In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself)." This helped me so much
Excellent! ;-) I found that when I merely just sat idly by, and, 'watched' the video...the concepts just seemed to pass over my head...I sort of understood/and, yet, another part of me, didn't quite get it...?! However, once I had made up my mind to stop being so incredibly 'lazy'; and, just get up...move over to the desktop computer; and, there do the exercises 'hands on'...well, my understanding became so much deeper. So, when he said adding inside of the CSS sheet the rule: 'position:relative;' onto any element...allows you to move around that element using: 'top/bottom/left/right'. I actually went and experimented by carefully applying each of these methods, one at a time: 'top:10px;'/'bottom:10px';/'right:10px'/'left:10px' ...I also noted that... when you move an element's 'top' position the element actually moves 'downwards' when you move an elements 'bottom' position the element actually moves 'upwards' ...similarly... when you move an elements 'left' position the element actually moves 'rightwards' when you move an elements 'right' position the element actually moves 'leftwards' I also, understood exactly what he meant by, the elements 'point of origin': 0,0; stayed exactly the same/while all positioning was being done relative to that particular point. Using this much slower 'step by step' investigative method...as opposed to very 'quickly' watching/and, re-watching the video all in one go; and, by practising positioning elements/then, re-positioning elements myself...I understood exactly what he had meant in lot more 'concrete' manner...also, in a way that tends to 'stick' inside of one's mind; as opposed to these ideas going in/then, immediately, going back out, again! Right now, I'm only merely half-way through the video...; anyway, I decided to upload all that I've gone and learned so far into my GitHub online a/c. Source code can be seen here... github.com/pramnora/css/blob/master/css-positioning-01.html Application web page can be seen here... peaceful-wing-65e1cd.netlify.com/css-positioning-01.html
So far the best explanation about CSS positioning. I was struggling to understand difference between relative and absolute. This video helped a lot. Thanks.
Tutorial thank you very much for making it. Really helped me understand the difference between relative and absolute position looking forward to trying it all out tomorrow!
1)When element has position absolute it moves in context to its positioned elemeent(not only relative position, as you said in video) 2)In case of position:fixed, element moves in respect to viewport(you said, it moves with respect to body), that is why even after scrolling element is fixed.
There's a difference: when you say left then what left you want to change , since there is margin,padding,border . Therefore you have to specify margin-left to produce desirable effect on margin of your box(every element in html is a box) .Hope this hepls you to understand 😊
At about 11:00 of the video,you set .second {position:absolute} without .parent's position being set to relative, then the width of "second" changed. Do you know why that is? thank you!
Hi, thanks for the video. Why at 9:27 the div second common didn't overlap the div first common but actually overlapped the third? As you said, its parent is the body. Thank you
7:52 so taking this situation for example, judging that 'default position' is static, then I assume: First: "static". Second: absolute. Third: "static". Does this mean that 'static' will always end up behind 'absolute'?.
I'm kind of a beginner....I realize this is just demo for positioning, but you're not showing the real html, right? You have div classes of "first, second, third" and "common" in your css, and "first common", etc in your html. What's going on there? I guess I just learned something new. One more question....how do you get the fixed effect with a logo/ad,etc if you need a responsive website? Nice video, and I'll study it. Thanks!
Thank you for this clear explanation. It's potentially VERY confusing topic. 10:15 May I ask what are you using to enable you to add that div element with a class of parent just by typing ' div.parent '?
Hey Man! Great video! Is it possible to have three elements (like one div with color (as a background), one text and an image below the text) and the image move down when the text get adjusted by the window shrinking horizontally. so i don't need to make viewpoints? I know that the objects arrange themselves, but if i put some background element, i cant position on center. Did you understand? Hope you respond! Thanks e success!
thanks for tutorial but i have made a full screen slider and i want a transparent menu on it but when i make their position absolute the div and text disappear but only on clicking the inspect the text just glows once can you help me please i am stuck?
relative element with a percentage top value is calculated incorrectly if its parent only has min-height set. Applying a non-percentage height to the parent, or changing top to px fixes
Question: when we add absolute does it behave like a float. You mentioned that it comes out of the stack. Also, in absolute it is positioned in relative to parent. So parent origin is at first element's top left corner. Since 2nd doesn't have any top defined it should have gone on top of first element! I am confused!
Absolute doesnt behave like a float. It comes out of the stack. but its stays there until you use top, left , right, bottom , then it will be relative to its relative parent . You have to play around to understand it. let me know if you still have questions.
thanks for the great comprehensive video! ...I would like to ask one question though ..why the second element shrink when you change it's position to absolute or fixed? ...why doesn't it keep its width?
I enjoy your tutorials a lot, especially those with the interview questions. Now, if you could make a tutorial on how to get work with all this knowledge, it will become viral. :)
Thanks for the video! At 10:05 you used a shortcut to create a new div with class parent by typing div.parent, and it is somehow converted to How did you do that?
Codecademy, Freecodecamp, Treehouse, major respects to these guys but you have explained it much clearer than they have. You’re examples were outstanding. I finally get it!! Thank you sir!!!
Thanks DJ for an awesome comment. :)
For longtime struggled to understand the difference of relative and absolute.. this tutorial made it clear. Thanks a lot buddy.
Amazing explanation...
So its like this..
Relative- to itself
Absolute- to its main parent
Fixed- to the browser
Thanks very much, indeed, for that simple; but, truly GREAT summary. ;-)
I notice some of the comments below say "awesome tutorial", and I agree whole heartedly! You're a virtual gold mine of information, and I hope you continue making videos on a regular basis. . .Thanks again.
Thank you :)
Nicely explained. Thanks.
Few points.
* absolute: When no top/left/right/bottom(TLRB) are mentioned, the element stays where it would stay as if it was static. But it is not entering into the flow. When the TLRB are mentioned then it is relative to it's first relative ancestor.
* fixed: Its not relative to the root element. But its relative to the window screen size. During scroll the root element is scrolling up, but the fixed element stays there.
Nice one
I usually don't comment on youtube videos but, this tutorial was great.
I like how you show everything in one screen instead of flicking back and fourth to show css results.
took me a couple of days but i finally understand. Thanks
5:29 think of this as three guys standing in a line, and they are touching each other XD
lol.
Harsh Phoujdar That was hillarious.... LMAO
then, the 2nd guy goes on top of 3rd xD
lol I thought the same thing.
you have a dirty mind! :)
INCREDIBLE ..... YOUR EXPLANATION IS SO SIMPLE BUT YET SO COMPLETE ..... YOU NEED TO TEACH THE LOUSY TEACHERS I HAVE ON HOW TO TEACH ..... LMBO 😎😉
the best tutorial ive ever seen about positioning,others only speak speak speak but no example,hats off
I seen this in 2017 before going to interview . positioning is the only question Interviewer asked me in css section and i gave these answers with same example and the interview went well . I got selected also . In my job i haven't touched css not even opened a css file my work is just did JavaScript . Today i am changing my job and going for interview came back here to recall positioning .
Thanks sir really appreciate your time that you make tutorials
I wish I had seen this video some months ago. I would have avoided so many useless readings. Thank you.
I am glad you learnt something. keep learning the fundamentals.
This is by far the best explanation of these position properties.
Best tutorials on JS and CSS I have ever seen so far with awesome explanation.Kudos!!!!!
As others have said, this is by far the best attempt to explain this confusing stuff that I've yet seen. Thank you, very good teacher.
Glad it was helpful!
I had watched several explanations without much success but I think I finally got it thanks to you man!
ye
Finally, I've been kind of struggles understanding CSS position property. Watching this vid makes it clear. Thanks a lot!
I could not understand these position attributes until I found your video. Thank you!
Thanks for watching Chimi!
GREAT! Cleared the entire concept of POSITION property. It just cleared all my doubts. Thanks for the video
thanks for watching! :)
techsith Welcome
Your explanation helped me detect a lot of issues that were in the UI in a project I'm working on. There are just so many dirty hacks (guess and check) being used just to make the elements display properly.
Thanks man! I was getting fed up reading junk on StackOverflow being voted as best answer, that encourages filthy work-arounds; absolutely horrible for responsive app design. It's things like this that makes me want to stick to back-end.
I feel your pain. CSS is very annoying when it doesnt work . Use Sass if you can instead of directly modifying CSS. Good Luck!
I have 2 questions:
1) 3:56 why does changing the second element to relative make it rise above and overlap the third element? I thought the order in which elements are stacked is determined by their order of appearance in the HTML.
2) 7:50 why does changing the second element to absolute cut off the red background except for where text is present?
1) position relative doesnt take it out of the its natural order but it allows it to move around its original position by using left, right , top, bottom . it also doesnt disturbs the other elements around it so it has to float on the top.
2) originally the element was like a block which means it covers the entire area, when you make it an absolute element its no longer behaves like a block so it only occupies the space of its content.
@@Techsithtube Okay that makes sense. Thank you!
So if a elements position is absolute,,,it will float on top of everything and have a position relevant to the top left corner of its parent (IF its parent is relative)..and if its parent isnt relative,,it moves in relevance to the BODY's top left corner?
yes .
It is relative to the parent if the parent is not static.
"Absolute: The element is positioned relative to its first positioned (not static) ancestor element"
From source: For an absolutely positioned element, where the left, top, etc. are calculated from depends upon the position property of the parent and grandparents of the element in question. If the parent of the element is a positioned element (meaning its position is set to anything except position:static), then an absolutely positioned child is positioned relative to that parents rectangle (or grandparent, or great-grandparent, etc). But if none of the parents are positioned elements, the child is positioned relative to the bounds of the document.
Thanks for this tutorial explaining CSS positions: absolute, fixed and relative. Very well defined
This video helped clarify the difference between status, relative, fixed and absolute - thanks. I do wish it would have shown how to make a page fit “snugly” under a menu header (for instance), so you could write one menu and have each following page section line-up beneath it (without overlap??) I guess I'll be working on that myself.... Good video though - keep-up the good work.
Css issues can be tough but once you solve it very much satisfying. Good Luck :)
Finally I understood the position property !
Thank you so much for being so clear and to the point :)
was struggling, but now clear! A big thanks and like the way you deliver :)
Glad you got it. Thanks for watching!
Wow! Such a simple and to the point explanation. Will be watching your other videos as well! 👍🏻
Thanks for watching! :)
Already watched several videos before this one, but so far this is the best one . Thank you
Very Nice, position element is hard tio understand, this is a good definition I found that might make it easier to understand:
"What Is Absolute Positioning?
This type of positioning allows you to place your element precisely where you want it.
The positioning is done relative to the first relatively (or absolutely) positioned parent element. In the case when there is no positioned parent element, it will be positioned related directly to the HTML element (the page itself)."
This helped me so much
yes you got it Falcon.
Excellent! ;-) I found that when I merely just sat idly by, and, 'watched' the video...the concepts just seemed to pass over my head...I sort of understood/and, yet, another part of me, didn't quite get it...?!
However, once I had made up my mind to stop being so incredibly 'lazy'; and, just get up...move over to the desktop computer; and, there do the exercises 'hands on'...well, my understanding became so much deeper.
So, when he said adding inside of the CSS sheet the rule: 'position:relative;' onto any element...allows you to move around that element using: 'top/bottom/left/right'. I actually went and experimented by carefully applying each of these methods, one at a time: 'top:10px;'/'bottom:10px';/'right:10px'/'left:10px'
...I also noted that...
when you move an element's 'top' position the element actually moves 'downwards'
when you move an elements 'bottom' position the element actually moves 'upwards'
...similarly...
when you move an elements 'left' position the element actually moves 'rightwards'
when you move an elements 'right' position the element actually moves 'leftwards'
I also, understood exactly what he meant by, the elements 'point of origin': 0,0; stayed exactly the same/while all positioning was being done relative to that particular point.
Using this much slower 'step by step' investigative method...as opposed to very 'quickly' watching/and, re-watching the video all in one go; and, by practising positioning elements/then, re-positioning elements myself...I understood exactly what he had meant in lot more 'concrete' manner...also, in a way that tends to 'stick' inside of one's mind; as opposed to these ideas going in/then, immediately, going back out, again!
Right now, I'm only merely half-way through the video...; anyway, I decided to upload all that I've gone and learned so far into my GitHub online a/c.
Source code can be seen here...
github.com/pramnora/css/blob/master/css-positioning-01.html
Application web page can be seen here...
peaceful-wing-65e1cd.netlify.com/css-positioning-01.html
So far the best explanation about CSS positioning. I was struggling to understand difference between relative and absolute. This video helped a lot. Thanks.
Really Awesome .. I have checked lots of videos to understand this concept but u have given the perfect and clear answers to this topic Thank you
Thanks for watching Ayyapa
This was by far the BEST video tutorial on position! Thank you!
Thanks for watching! :)
Tutorial thank you very much for making it. Really helped me understand the difference between relative and absolute position looking forward to trying it all out tomorrow!
1)When element has position absolute it moves in context to its positioned elemeent(not only relative position, as you said in video)
2)In case of position:fixed, element moves in respect to viewport(you said, it moves with respect to body), that is why even after scrolling element is fixed.
Best explanations I've seen so far.
Thanks Troy for watching! :)
at 4:20 what's the practical difference between let's say left and margin-left?
There's a difference:
when you say left then what left you want to change , since there is margin,padding,border . Therefore you have to specify margin-left to produce desirable effect on margin of your box(every element in html is a box) .Hope this hepls you to understand 😊
I've finally managed to understand these concepts thanks to your video. Thank you so much, I subscribed.
I am glad it helped. thanks for watching! :)
great much better than many paid tutorials
thanks for watching
sir i was having problem with sending mail using php can u help
Finally some simple and helpful explanation
how positions behave. Thanks!
Ah now I understand absolute vs. relative positioning. Great overview, thanks!
Thanks for watching! :)
I had some doubts about positioning and your examples helped me better understand how the code works! Thank you!!
After watching lots of video , finally found the best one...
Thank you Gulam for watcing!
At about 11:00 of the video,you set .second {position:absolute} without .parent's position being set to relative, then the width of "second" changed. Do you know why that is? thank you!
Yaaaaaaaassssssssss. I have been watching the tones of the video. But this one I understand perfectly. Thanks man!
I am glad you got it Pelin. Thanks for watching!
Hi, thanks for the video. Why at 9:27 the div second common didn't overlap the div first common but actually overlapped the third? As you said, its parent is the body. Thank you
Cool, Thank you. I have better understanding of absolute position now. Example helped a lot. Would be great to have more examples to see it.
very nicely described. It would be very helpful if you give a tutorial about z-index property of css
You made it so easy to understand. You are a good teacher
7:52 so taking this situation for example, judging that 'default position' is static, then I assume:
First: "static".
Second: absolute.
Third: "static".
Does this mean that 'static' will always end up behind 'absolute'?.
Great Video.You explained this really good!Since I could not understand position properties in Css,so I came to this video.Thx!
never stop what you are doing sir! thx
Question. Can you just change the padding instead of using the relative position just like what you did at 5:26 ?
Padding would push the element next to it. relative position wont. so depend what kind of behavior you are looking to get.
techsith thank you
This was a very clear and direct way to explain positioning....Thanks !!
I'm kind of a beginner....I realize this is just demo for positioning, but you're not showing the real html, right? You have div classes of "first, second, third" and "common" in your css, and "first common", etc in your html. What's going on there? I guess I just learned something new. One more question....how do you get the fixed effect with a logo/ad,etc if you need a responsive website? Nice video, and I'll study it. Thanks!
fixed position inside a responsive website would just work fine. you just have to put it inside a @media query accordingly.
Thank you for this clear explanation. It's potentially VERY confusing topic.
10:15 May I ask what are you using to enable you to add that div element with a class of parent just by typing ' div.parent '?
Very good. Straight forward and to the point. Good refresher for me
Thanks for watching!
Hey Man! Great video! Is it possible to have three elements (like one div with color (as a background), one text and an image below the text) and the image move down when the text get adjusted by the window shrinking horizontally. so i don't need to make viewpoints? I know that the objects arrange themselves, but if i put some background element, i cant position on center. Did you understand? Hope you respond! Thanks e success!
FOr that you can use flex layout. its actually pretty simple. I have a video on that on my channel if you want to look at it.
@@Techsithtube Thanks man! I'll look for.
Explained in a very nice and slow way.
Suman, thanks for watching!
thank you for the examples! really helped me understand the concept
Thank you for the video--really helped explain the difference and not make it so complicated.
You are so awesome. Clear and concise. Pls continue to make more video
Hands down the best explanation.
Tough topic explained with simple examples! Thanks for sharing.👍
Thanks Nizamuddin for a comment. Keep on learning!
I like your examples , very clear explanation
Thanks for watching! :)
thanks for tutorial but i have made a full screen slider and i want a transparent menu on it but when i make their position absolute the div and text disappear but only on clicking the inspect the text just glows once can you help me please i am stuck?
finally someone explained it clearly :)
thanks for such a clear cut explanation :) liked it bro
This lesson cleared my misunderstanding so much. Thank You.
great!! i never understand this positions.. but after watching your video i totally understand..thankyou so much !!!
Thanks for watching :)
Thanks tomorrow is my interview and i am confused with this positioning .. but now all clear :) thanks.. helpful tutorial
Good Luck with your interview. Let me know how it goes.
Great explanation!! I clearly understood the difference between position: fixed, absolute, relative.Thanks.
Thanks for watching!
after making second div's position relative @4:06.. I set top 10% but it does not work however if I say left:10% it works why??
relative element with a percentage top value is calculated incorrectly if its parent only has min-height set. Applying a non-percentage height to the parent, or changing top to px fixes
your tutorials are superb :)
Thanks Subhash.
great video on the position property.I am a newbie and this really does help. Thank you.
Sir You made it so easy. thank you for this wonderful video
I am glad that you learnt Ziaul. thanks for watching!
Thank you, so great explanation but i was a little confused with the absolute. Why @ 7:50, the width of the second div changed?
Great tutorial! Please make more, I love your style and how you explain everything.
Finally, I understand positioning. Thank you.
:) I am gald it helped. Thanks for watching!
Question: when we add absolute does it behave like a float. You mentioned that it comes out of the stack. Also, in absolute it is positioned in relative to parent. So parent origin is at first element's top left corner. Since 2nd doesn't have any top defined it should have gone on top of first element! I am confused!
Absolute doesnt behave like a float. It comes out of the stack. but its stays there until you use top, left , right, bottom , then it will be relative to its relative parent . You have to play around to understand it. let me know if you still have questions.
Great video, really good explanation !!
Thanks for watching !:)
Just found you today.. this is the best explanation of "position" I've found.. "Position" and I don't get along.
lol. :)
Really nice video. Very clear explanation and very detailed.
thanks for the great comprehensive video! ...I would like to ask one question though ..why the second element shrink when you change it's position to absolute or fixed? ...why doesn't it keep its width?
Really useful tutorial! Would recommend watching it on 1.5x speed though
Thanks for watching Caleb.
Really helped in understanding the concept compared to other videos I referred.
Great job on this video. I learned a lot.
Thanks for watching
Very helpful. Have a much better grasp on it now. Will probably watch again to solidify it, but it's a great start. Thanks!
Thanks for watching! :)
You mentioned the value "initial" in the beginning of the presentation, is it any different from "static"?
Really good video extremely happy I clicked on it
Thanks for watching Tyree.
I enjoy your tutorials a lot, especially those with the interview questions. Now, if you could make a tutorial on how to get work with all this knowledge, it will become viral. :)
Best and simple explanation ever
Wow !! Amazing What an explanation is !!!
Man you're gold. Watching you for the 2nd time and just wondering how long you been in this biz?
Good lesson! Thanks from Brazil!
Olá Gabriel. Obrigado por assistir!
Thank you for explaining this. It was very helpful!
Clearly understood the concept,thank you Guruji..
Thanks for the video! At 10:05 you used a shortcut to create a new div with class parent by typing div.parent, and it is somehow converted to How did you do that?
in jsfiddle, you can type div.parent and it would convet to . Lots of editors these days do the same.
??
getting div.parent plus tab key converted in is made by emmet plugin
Thank you very much for taking the time to explain this!! Much appreciated! :)
simply the best tutorial out there!
Great video, man, It would be perfect if you just add the jsfiddle link in the description. Thanks, keep it up!