What I learned: 1. position absolute will make the element jump out of document flow, other elements will basically ignore it. 2. absolute is based to body by default, unless its parents has position relative. 3. z-index to work with position relative. Thanks Kevin.
my whole life was a struggle with CSS cause I never give my self time to learn it instead it was usually a process of trial and error, thank you Kevin your videos are very very helpful
thank you so much for this!! I never used position absolute because I could never really understand how it worked. Really love the way you explain things, thank you so much Kevin!!
sridhar belide then if we have a parent with position: absolute and the child with also position: absolute will that will lock that child element inside it ? If we specified the top, bottom, right and left value?
@@cristiantorres3303 "static" is one of the possible values for the position property. Here's the full list ... position: static|absolute|fixed|relative|sticky|initial|inherit;
I pick up a level of understanding on each subject from watching one of your videos that I wasn't able to achieve through an entire college course that covered the exact same material. I was using both absolute/relative positioning and the z-index on my creations but didn't have a completely clear understanding of exactly how they worked and simply used trial and error until they performed how I wanted them to. Thank you for explaining things in such a clear, concise, and logical manner.
Same here. I am in a bootcamp. But the explanation here are better than my instructor's. The instructor knew how to use it by trial and error but couldn't explain it well like thiis. Thank you
4:07 I believe if a child element has a position absolute, and all the parents are position static (default), then the child positions itself relative to the viewport (instead of the body element). Not sure if this is relevant though, since maybe its bad practice to make the body element less than 100% of the viewport. I recently discovered this because I wanted my body element to be slightly smaller than the viewport, and my positioning suddenly got weird, and I realized it was because position absolute is relating to the viewport rather than the body element. You very likely know this and didn't get this specific for simplicity sake. Thanks for the awesome video Kevin!
I've been doing CSS for years and only JUST learned that position absolute works inside of position relative... *sigh* Why didn't anyone tell me this!? lol
uff.. This is so amazing. Now I am clear on the Absolute and Relative positions. Thank you so much for this amazing video. My doubts are cleared now. You are amazing.
by far one of the best tut for css positioning online. Question: i have a div this is cool silly fun dude in my css i am animating the span so the opacity is 0 and using key frames i make them visible after a few seconds. the problem is that when i change the span to absolute position the last div "last-word" changes position near to the div "first-part" -- i know that using abs position takes the item out of document flow, but how do i still have spacing... the final result i would like is a sentence "this is cool dude" ... thanks.
Hi. Just found your channel. I was looking for explanation about position absolute and relative. That was blur until I find your video. Thank you man. You have me subscribed😊
I have watched several videos trying to understand absolute positioning. It confused me that writing the absolute property on one element, results in repositioning of a different element. I watched half of this video and it has already registered. Sometimes it's all about the teacher. THANK YOU!!!
thank you for this, I had my boss ask for an absolutely positioned element and I thought she was crazy, having a relative parent will make this work just like she wanted it.
I used to think that such things are heavy to understand until I watched your video. Thanks a lot for making such video and these are really helpful for beginners thank you Again Love from India
What I can never understand is when you have two relatives how do you get the absolute to position itself with the correct relative? Does it always default to the first relative? so in this case and not .. if parent p was not a paragraph and let's say another div (a square inside the turquoise parent) how would I get the red square to default to the second square and not the turquoise square? ... Thank you in advance!
without any relative, is absolute relative to body? I tried giving margins to body and html itself, i found it to be relative to screen's top, bottom, etc. not relative to body. tried this: html { margin: 3rem; } body { margin: 3rem; background-color: red; } .parent { padding: 1rem; height: 600px; background-color: yellow; } .child { display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; background-color: green; position: absolute; top: 0; }
So absolute is like it's no more attached to the page and just rise up above the page ! Oh and for taming the absolute child ,u need a parent with position relative .
dk how to thank u,this video is literally 3 years old and i watched it about a month a go. But today i was able to put this knowledge to actual use in an actual peoject. So wanna thank u again for sharing ur knowledge.you're an awesome teacher. And to other people if u ever needed to pos:abs more than one element just put all elements inside a div and apply pos:abs to one div instead of to 3,4 elements. Love u man ,stay safe
The thing that confused me initially was that both relative and absolute are both relative but to different things: Absolute is relative to the nearest ancestor that is itself positioned. Relative is relative to where the object would have been had you done nothing.
I think you should have started with position static so knowing the difference of static and other positions would help learners much better. Since you are a good teacher and u have a good channel it was shame not to see u tell this difference. I watched that on another channel and helped me a lot. Just wanted to say. Thank you
I have one looking at em and rem - th-cam.com/video/_-aDOAMmDHI/w-d-xo.html and another looking at vw and vh - th-cam.com/video/IWFqGsXxJ1E/w-d-xo.html Let me know if that's what you're after, or if you'd like to see more, or something different on them :)
Great video! One question: How does CSS determine the initial position of an absolute element, before using top/left etc. ? It seems to position itself to the nearest sibling after its current location in the DOM
That was my question! I think it's removed from the flow of the document at it's current position in the document, unless there is styling telling it to do otherwise.
I'm looking but haven't yet found it ... but if you could create a video on the various units in CSS and your guidance on when to use em, rem, vh, vw, px, pt etc would be very interesting. Thanks!
i made a div parent and child like in the vid, and i put in the parent vh75 and vw75, but yours is in the center of the screen and mine on the edge? what else do you have in youre css to get that?
Dude. Thank you so much for this video.... I had no idea how this worked and now I completely understand. Been bingeing your videos. Thanks for all the help on all the CSS mysteries.
Hey Kevin, I am trying to solve somehing and I couldn't find any tutorial for it. If you could make one it would be nice! SO basically I have an .mp4 video as a full screen cover. What I want is when I change viewport resolution that position and scale of the video stays the same but is cropping sides toward center. How can I do that? Thank you!
At 6:31 min the text is already on top of the red absolute position the n you say by including z-index the text will jump on top of the absolute position yet it was already on top without the z-index. Kindly assist what it is that I'm getting wrong.
So, me as a person this world is relative to me but i am also positioned relatively. So if i became absolute in this relative world. I would be able to go through things unless an object in this world is relative to me.
Yes, I'm currently going through 'position absolute' addiction syndrome. I've been focusing so heavily on Javascript that when I come to actually styling an app I've figured out the functions for I find myself struggling and at the moment, position absolute is the only way I know. I'm building a portfolio so I know I'll have to address it at some point. Might as well deal with it before I get to the point of no return.
that was fun and informative. I got it, I think. So now here's my question... can z-index be used for the hamburger icon mobile appear/desktop menu? It would need to be a @media query, right?
Hi Kelvin powell , greet your tutorial is amazing. It would be very helpful if you provide valuable info on DOM (document obj modelling ) in javascript .
in minute 3:52 there is a small space in the left of the child red element that allows to see the parent in its left side. I don't understand why in the code. Some default margin or sth of the kind?
You have a talent for explaining some difficult concepts in an easy to understand way. Thanks so much for this, I was dealing the other day with a freecodecamp project where I had to have a responsive youtube video and I had to use an absolute child inside of a relative parent wrapper. this helps explain what I was trying to do so well!
My mom enters my room and a grown man talks about playing around with the child, well...
you have the dirtiest mind of all human beings ever
😂😂
lol i heard that and was instantly like
*hold up.*
😅
lol its youtube not darkweb 😂🙌
What I learned:
1. position absolute will make the element jump out of document flow, other elements will basically ignore it.
2. absolute is based to body by default, unless its parents has position relative.
3. z-index to work with position relative.
Thanks Kevin.
This thing used to make my head hurt. Thanks a lot for explaining it clearly
my whole life was a struggle with CSS cause I never give my self time to learn it instead it was usually a process of trial and error, thank you Kevin your videos are very very helpful
Unlike other languages, you can't learn CSS using trial and error. It's just too complicated to be able to do that. Speaking from experience 🤣
I always want to go from beginner to expert in 2 steps instead of using as many steps as possible and learning the fundamentals
Yeah me too , this video helped a lot
@@kavinbharathi I can't even consider CSS like a language
what do you consider it then?@@selhichakib
Although quality is a relative subject, the quality of this channel is absolutely superb!
Haha, nice. And thanks!
I am a fan from 2022, and seeing how far you've become with your journey, the way you speak now boasts confidence and I love it.
thank you so much for this!! I never used position absolute because I could never really understand how it worked. Really love the way you explain things, thank you so much Kevin!!
Finally, some one explains this very simply, big thanks Kevin.
Each day, I find your videos clearing a roadblock I hit that day. Yesterday it was about flex positioning, today this. You are a lifesaver.🥺.
Actually position:absolute will look for non-static parent not only parent with position:relative
Yup, you're right, it was an oversight of mine when I mentioned that :\
sridhar belide then if we have a parent with position: absolute and the child with also position: absolute will that will lock that child element inside it ? If we specified the top, bottom, right and left value?
WHAT NON-static means?
@@cristiantorres3303 "static" is one of the possible values for the position property. Here's the full list ...
position: static|absolute|fixed|relative|sticky|initial|inherit;
sticky is cool for example if you want your hamburger or your menu be here anywhere you scroll to the page
Finally....a simple, concise explanation. Thanks.
The best explanation thus far. Extremely grateful!
MY GOD, After 4 hours of crying I finally did it thank you so much for your amazing videos
I'm not just 'relatively' new to CSS, I'm 'absolutely' new :p
Take my likes u deserve it even tho it has been a year 😅😅
I pick up a level of understanding on each subject from watching one of your videos that I wasn't able to achieve through an entire college course that covered the exact same material. I was using both absolute/relative positioning and the z-index on my creations but didn't have a completely clear understanding of exactly how they worked and simply used trial and error until they performed how I wanted them to. Thank you for explaining things in such a clear, concise, and logical manner.
Same here. I am in a bootcamp. But the explanation here are better than my instructor's. The instructor knew how to use it by trial and error but couldn't explain it well like thiis. Thank you
Jaja I still do the same trial and error tactic... I hate not being able to understand what I’m doing... this explanations are on another level.
This video is absolutely amazing. I had a half way decent understanding of position absolute and relative, but now it makes complete sense! Thank you!
Accurate, concise definitions and clear, illustrative examples! Very well done!
Awesome mate. Thanks for taking the time to make the vid and beautiful example/ explanation.
it's 3 year old video but still this video helped me too much time
Thank You Sir
Kevin you are really a good teacher.
4:07 I believe if a child element has a position absolute, and all the parents are position static (default), then the child positions itself relative to the viewport (instead of the body element). Not sure if this is relevant though, since maybe its bad practice to make the body element less than 100% of the viewport. I recently discovered this because I wanted my body element to be slightly smaller than the viewport, and my positioning suddenly got weird, and I realized it was because position absolute is relating to the viewport rather than the body element. You very likely know this and didn't get this specific for simplicity sake. Thanks for the awesome video Kevin!
This channel has awesome content for web developers.
Been struggling with for a week now... And yo vid made it hella simple 💯
Thank you very much 👌🏽 🔥
I've been doing CSS for years and only JUST learned that position absolute works inside of position relative... *sigh* Why didn't anyone tell me this!? lol
uff.. This is so amazing. Now I am clear on the Absolute and Relative positions. Thank you so much for this amazing video. My doubts are cleared now. You are amazing.
Thank you very much for the great explanation.
So well put. I was able to understand something which I've been pondering over for years 😀
Awesome, glad it helped :D
Your channel is a gem for someone who is learning CSS
I was cruising right along in my CSS class until I hit this topic. You explain it well, but I’m still wrapping my head around it.
Are you good now?
Inline vs block
Thanks for the suggestion :)
Best explaination I have seen so far. Very clear and easy understanding. Thank you for the video mate!
by far one of the best tut for css positioning online.
Question: i have a div
this is
cool
silly
fun
dude
in my css i am animating the span so the opacity is 0 and using key frames i make them visible after a few seconds. the problem is that when i change the span to absolute position the last div "last-word" changes position near to the div "first-part" -- i know that using abs position takes the item out of document flow, but how do i still have spacing... the final result i would like is a sentence "this is cool dude" ... thanks.
The most clear explanation of "relative" & "absolute".
Thanks!!
Hi. Just found your channel. I was looking for explanation about position absolute and relative. That was blur until I find your video. Thank you man. You have me subscribed😊
Welcome aboard! So glad you liked the video enough to subscribe!
I have watched several videos trying to understand absolute positioning. It confused me that writing the absolute property on one element, results in repositioning of a different element. I watched half of this video and it has already registered. Sometimes it's all about the teacher. THANK YOU!!!
Korrekt bruder mashalla arbeit
thanks learned in minutes
This video is a gem. Mystery solved. Thank you, I would love to see more videos like this one!
thank you for this, I had my boss ask for an absolutely positioned element and I thought she was crazy, having a relative parent will make this work just like she wanted it.
I watched several other videos on youtube but this is by far the best in explaining css positioning. Loved it
Thank you, sir. It was very helpful!
you've helped me a lot.
thanks
lol, Cristiano Ronaldo is about to change career
I used to think that such things are heavy to understand until I watched your video.
Thanks a lot for making such video and these are really helpful for beginners
thank you Again
Love from India
This is truly awesome! Thanks - you just saved me hours searching for a solution!
thank you
What I can never understand is when you have two relatives how do you get the absolute to position itself with the correct relative? Does it always default to the first relative? so in this case and not .. if parent p was not a paragraph and let's say another div (a square inside the turquoise parent) how would I get the red square to default to the second square and not the turquoise square? ... Thank you in advance!
without any relative, is absolute relative to body? I tried giving margins to body and html itself, i found it to be relative to screen's top, bottom, etc. not relative to body.
tried this:
html {
margin: 3rem;
}
body {
margin: 3rem;
background-color: red;
}
.parent {
padding: 1rem;
height: 600px;
background-color: yellow;
}
.child {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
background-color: green;
position: absolute;
top: 0;
}
This video deserves a million thumbs up. 👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾
I'm learning CSS right now and could not wrap my head around this concept. You just cleared it up I wish I could like this 10 times
Thank you so mush for giving this value for free !!! i cant believe finally i have found the channel that will makes me understand the werid css :D
So absolute is like it's no more attached to the page and just rise up above the page !
Oh and for taming the absolute child ,u need a parent with position relative .
Just know that Devs around the world don't take you for granted. Your videos help me keep my job.
I genuinely read your thumbnail , "A**hole and Relatives explained" and was thinking, " wait a sec, aren't they both same?"
😂
Thanks! Won't an absolute element also respect any other parent positions that is not static, fixed for eg?
This really explained LOTS of things! And made me subscribe immediately.
I was struggling with this concept for years and you managed to explain it so simply. Thanks
THANK YOU!
The best tutorial I've seen so far.
Great explanation! :) Thank you! :)
Thanks for the explaination :)
Please make a video about css transform and transform origin properties. They are really very complicated.
I don't got into transform-origin in this one, but I talk about a few of the transforms in this video: th-cam.com/video/Nloq6uzF8RQ/w-d-xo.html
@@KevinPowell Thanks Kevin
Wow, the first of about ten videos that finally made it clear. I wish yours had been the first! I'd like to thank you :before and :after.
Love your vibe
This guy has made me slowly fall into love with CSS and I used to hate it more than anything. Thank you so much for all this tutorials !
So happy to hear that!
I see everything so clearly after just one video nearly every time I need help. I feel like CSS is a flex now 🦾😁
Yeap. This video made me think of simply learning HTML and CSS instead of anything else, like Webflow.
Thank you
Awesome and nice explanation .
I only scanned a few comments. I noticed in the video before you gave the .parent p a z-index the text appeared on top of the red box.
dk how to thank u,this video is literally 3 years old and i watched it about a month a go. But today i was able to put this knowledge to actual use in an actual peoject. So wanna thank u again for sharing ur knowledge.you're an awesome teacher. And to other people if u ever needed to pos:abs more than one element just put all elements inside a div and apply pos:abs to one div instead of to 3,4 elements. Love u man ,stay safe
thanks, it helped a lot
I feel that you could win a no-blinking contest with ease
you made my day :), THANK YOU
I feel like I love you, thank you so much.
🌚
really awesome thank you !!!
The thing that confused me initially was that both relative and absolute are both relative but to different things: Absolute is relative to the nearest ancestor that is itself positioned. Relative is relative to where the object would have been had you done nothing.
That confused me too.
So if want to add z-index to particular element it should must have position right? Just wanted check I got it right
I think you should have started with position static so knowing the difference of static and other positions would help learners much better. Since you are a good teacher and u have a good channel it was shame not to see u tell this difference. I watched that on another channel and helped me a lot. Just wanted to say. Thank you
That was ace. Thanks.
px, em, rem, vh etc, this kind of metrics!
I have one looking at em and rem - th-cam.com/video/_-aDOAMmDHI/w-d-xo.html
and another looking at vw and vh - th-cam.com/video/IWFqGsXxJ1E/w-d-xo.html
Let me know if that's what you're after, or if you'd like to see more, or something different on them :)
Thanks! I will check it
Great explanation. Thank you!
Great video!
One question: How does CSS determine the initial position of an absolute element, before using top/left etc. ?
It seems to position itself to the nearest sibling after its current location in the DOM
That was my question! I think it's removed from the flow of the document at it's current position in the document, unless there is styling telling it to do otherwise.
@@clintona1855 Makes sense, thank you
I love the way you explain things, simple, no over explaining.... THANK YOU
I'm looking but haven't yet found it ... but if you could create a video on the various units in CSS and your guidance on when to use em, rem, vh, vw, px, pt etc would be very interesting. Thanks!
i made a div parent and child like in the vid, and i put in the parent vh75 and vw75, but yours is in the center of the screen and mine on the edge? what else do you have in youre css to get that?
Very concise, clear and easy to understand. Thank you so much for this video!
Dude. Thank you so much for this video.... I had no idea how this worked and now I completely understand. Been bingeing your videos. Thanks for all the help on all the CSS mysteries.
By watching it so many times I hope I will finally get the ALL of the concept but yeah I did get the ABSOLUTE vs RELATIVE.
Thank You
You're welcome :)
That was so helpful!!! I didn't know the parent having a relative state would determine the child's positions. This clears up a lot of confusion
Hey Kevin, I am trying to solve somehing and I couldn't find any tutorial for it.
If you could make one it would be nice!
SO basically I have an .mp4 video as a full screen cover. What I want is when I change viewport resolution that position and scale of the video stays the same but is cropping sides toward center.
How can I do that?
Thank you!
Thanks it helped me alot 👍
Thanks, man. That was a great video! And the tip about the z-index was also really helpful :)
At 6:31 min the text is already on top of the red absolute position the n you say by including z-index the text will jump on top of the absolute position yet it was already on top without the z-index. Kindly assist what it is that I'm getting wrong.
Thank you :)
So, me as a person this world is relative to me but i am also positioned relatively. So if i became absolute in this relative world. I would be able to go through things unless an object in this world is relative to me.
Yes, I'm currently going through 'position absolute' addiction syndrome.
I've been focusing so heavily on Javascript that when I come to actually styling an app I've figured out the functions for I find myself struggling and at the moment, position absolute is the only way I know. I'm building a portfolio so I know I'll have to address it at some point. Might as well deal with it before I get to the point of no return.
thanks!
that was fun and informative. I got it, I think. So now here's my question... can z-index be used for the hamburger icon mobile appear/desktop menu? It would need to be a @media query, right?
Hi Kelvin powell , greet your tutorial is amazing. It would be very helpful if you provide valuable info on DOM (document obj modelling ) in javascript .
in minute 3:52 there is a small space in the left of the child red element that allows to see the parent in its left side. I don't understand why in the code. Some default margin or sth of the kind?
You have a talent for explaining some difficult concepts in an easy to understand way. Thanks so much for this, I was dealing the other day with a freecodecamp project where I had to have a responsive youtube video and I had to use an absolute child inside of a relative parent wrapper. this helps explain what I was trying to do so well!
The positioning demo was very good, although I'm still trying to figure out you got that spacing around the div and sides without margin: 4rem auto;