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
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
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
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!!!
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
i have learned html, css(the whole playlists) from many channels and never commented about their teaching, but this guy way of teaching has forced me to comment that he is the best.
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 found your videos through a HTML/CSS course called Odin Project. I have been poking around with websites since the WYSIWYG Macromedia Dreamweaver days and trying to learn to code CSS on and off through the years. Then came devices and things got even more complicated with responsive websites. I gave up for awhile due to this, every time I tried to create something it was a mess. Your videos have made everything click instantly for me. I feel more confident in creating websites that will work on all devices and just more confident in my coding ability overall. THANK YOU SO MUCH
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.
2½ after posting this video and it's still helping people. Awesome explanation of relative positioning. I don't know why, but it's always been a challenge for me to "get it." I'm much closer now than before I clicked "play." Thank you Kevin.
Been 2 years i was confused about this. Why dont other tutorials make it this simple. no one told me it looks for the closest parent with relative positioning. This solves everything. thanks.
Question: Up until 4:15 with the parent having no positioning, was it defaulting to the or the ? 5:42 same question about your comment. Does it default to body or the html?
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!
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.
I've been studying web design for over six months already and was struggling with a layout I am currently working on. This was very useful, gave me some ideas. Thank you, Kevin.
Thanks for this! I have been confused on this concept for a while now and this video just gave me that penny dropping moment where I now understand! great resource and really makes it simple for new SE
The best of all explanations! I immediately purchased your course at Scrimba as a token of appreciation (though you've equally good quality videos in your YT channel)
Oh man thanks! I'm going through Codecademy right now and I'm on this section. we'll it was confusing cause everything is given in written format with still images. this REALLY helped me grasp the concept way better. really grateful.
Very good explanations on these concepts. I've watched about half a dozen videos on this topic and always come away a little cloudy...until now! Thank you
Ha, relative. It makes sense now. It is tough when you take a break from coding and wanna jump back in. I love the commentts down here. Many of you are just like me, you just do it the hard way, rather than focus on the fundamentals. Thank you for the video.
Simple and explained in detail. I was finding difficult in understanding relative and absolute. After see this I can very well use this. Thanks for the post
I've watched this video before Today I got stuck at trying to nest my child element in the parent div but margin top was creating a space between the previous div and the current one which am working on. I came back to watch this video and voila, all set 🙌 I've been on this since last night, till 2AM but couldn't figure it out. Now it's almost 4PM and that's when your video came in handy. Thanks a lot man A new subscriber is in your list now 🙇
BRO THANKYOU THANKYOU SO FLOWERING MUCH I WAS SO CONFUSED ABOUT POSITION ABSOLUTE AND RESEARCHED A LOT BUT YOU GOT THE CONCEPT CLEAR IN MY HEAD! I am subbing sire!
thank you so freaking much i had been scratching my head form last 4-5 months read different articles saw a couple of videos on this topic but none of them helped me understand that how are these related and as well as different from each other and most importantly after watching this video i know how and when to use absolute.
Hi Kevin, I've been using a website designed to teach code and have learned a lot from that. No one way of learning is perfect though, and I've been supplementing a lot of that material with your videos because you tend to take a deeper dive into specific aspects of code and provide a lot of helpful insights as well as peripheral information that makes piecing things together easier. Thanks so much for your helpful videos!
7:35 Makes more sense? You solved a 2-year trying to understand how it works problem...from articles to 30min videos, and this masterpiece made it a lot simpler...
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
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!
This thing used to make my head hurt. Thanks a lot for explaining it clearly
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!
Your channel is a gem for someone who is learning CSS
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 😂🙌
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
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!!!
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?
The most clear explanation of "relative" & "absolute".
Thanks!!
I watched several other videos on youtube but this is by far the best in explaining css positioning. Loved it
I love the way you explain things, simple, no over explaining.... THANK YOU
Best explaination I have seen so far. Very clear and easy understanding. Thank you for the video mate!
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
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
Just know that Devs around the world don't take you for granted. Your videos help me keep my job.
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.
I was struggling with this concept for years and you managed to explain it so simply. Thanks
i have learned html, css(the whole playlists) from many channels and never commented about their teaching, but this guy way of teaching has forced me to comment that he is the best.
Thanks so much!
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
Your videos explain in 5 minutes these concepts, where I have spent hours searching through documentation. Many Thanks
I'm watching this video using the school's computer, and I only signed in just so I can give it a like. It's really worth it. Thank you so much
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
I found your videos through a HTML/CSS course called Odin Project. I have been poking around with websites since the WYSIWYG Macromedia Dreamweaver days and trying to learn to code CSS on and off through the years. Then came devices and things got even more complicated with responsive websites. I gave up for awhile due to this, every time I tried to create something it was a mess. Your videos have made everything click instantly for me. I feel more confident in creating websites that will work on all devices and just more confident in my coding ability overall. THANK YOU SO MUCH
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.
Finally, some one explains this very simply, big thanks Kevin.
This video is a gem. Mystery solved. Thank you, I would love to see more videos like this one!
2½ after posting this video and it's still helping people. Awesome explanation of relative positioning. I don't know why, but it's always been a challenge for me to "get it." I'm much closer now than before I clicked "play." Thank you Kevin.
Im doing a css course on Udemy and the positioning wasnt adequately taught. This tutorial cleared things up for me. Thanks a lot.
Been 2 years i was confused about this. Why dont other tutorials make it this simple. no one told me it looks for the closest parent with relative positioning. This solves everything. thanks.
I come here every now and then to refresh my knowledge on CSS Positioning. Cheers!
Kevin, you are a genius in explaining CSS a simple way. I never understood position absolute/relative - until TODAY. Thanks!
Question: Up until 4:15 with the parent having no positioning, was it defaulting to the or the ?
5:42 same question about your comment. Does it default to body or the html?
It defaults to the document root, which is the html element :)
@@KevinPowell Thank you for your concise pointers in your community and elsewhere, including your courses. You are a big help and inspiration.
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!
I have never understood this, until now. You are a pro teacher.
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.
I've been studying web design for over six months already and was struggling with a layout I am currently working on. This was very useful, gave me some ideas. Thank you, Kevin.
Glad I could help!
This is truly awesome! Thanks - you just saved me hours searching for a solution!
I love this short format. Just one topic here and there. Keep up the great work
Best tutorial on positioning I have seen so far.
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.
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.🥺.
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 😅😅
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
Finally....a simple, concise explanation. Thanks.
Great explanation! Without pushing a sale on you. Much appreciated!
This makes a lot more sense than the convoluted explanations ive read in the past.
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.
Thanks for this! I have been confused on this concept for a while now and this video just gave me that penny dropping moment where I now understand! great resource and really makes it simple for new SE
After really watching 3 videos, I finally understood relative and position. Love your content and keep it going.
The best of all explanations! I immediately purchased your course at Scrimba as a token of appreciation (though you've equally good quality videos in your YT channel)
Glad you liked it and thanks for getting the course, hope you enjoy it!
Oh man thanks! I'm going through Codecademy right now and I'm on this section. we'll it was confusing cause everything is given in written format with still images. this REALLY helped me grasp the concept way better. really grateful.
THANK YOU!
The best tutorial I've seen so far.
MY GOD, After 4 hours of crying I finally did it thank you so much for your amazing videos
"short of a time as possible" was my favorite part of the video. More people should take that approach.
This explanation was the best I have seen on youtube. Kudos to you.
Very good explanations on these concepts. I've watched about half a dozen videos on this topic and always come away a little cloudy...until now! Thank you
Glad this helped sean!
You have a unique way of teaching CSS, thank you. I learn alot from this than any other tutorial out there and w3schools
Thanks :D
Perfectly explained, this topic used to hurt my head so much, not anymore, thank you!
CSS position was the hardest thing to undestand untill i met this video. you're absolutely good and undestandable teacher.. thnks 1000 times 😍
Ha, relative. It makes sense now. It is tough when you take a break from coding and wanna jump back in. I love the commentts down here. Many of you are just like me, you just do it the hard way, rather than focus on the fundamentals. Thank you for the video.
Actually man u deserves a big thumbs up every time your videos really help me a lot liked and subscribed
Yes! thank you! I don't do front-end work every day and always forget this.
Simple and explained in detail. I was finding difficult in understanding relative and absolute. After see this I can very well use this. Thanks for the post
This video deserves a million thumbs up. 👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾
This really explained LOTS of things! And made me subscribe immediately.
Accurate, concise definitions and clear, illustrative examples! Very well done!
Thank you Kevin ! I always confuse about absolute and relative position. I got better understanding of how they work after this video.
I've watched this video before
Today I got stuck at trying to nest my child element in the parent div but margin top was creating a space between the previous div and the current one which am working on.
I came back to watch this video and voila, all set 🙌
I've been on this since last night, till 2AM but couldn't figure it out. Now it's almost 4PM and that's when your video came in handy.
Thanks a lot man
A new subscriber is in your list now 🙇
Boom, just what I needed to finally understand position relative and absolute. Thanks Kevin.
The most clear explanation of "relative" & "absolute".
Thanks!!🤩🤩
This is the easiest explanation of absolute and relative. Thanks Kevin
That background you have there just burns my eyes so much. Maybe i should go out more often :D. Great video btw
Gosh! The simplicity with which you explained it, thanks a lot!
Thank you for taking the time to post this video. It was very helpful.
Thanks Kevin! This is one of the simplest explanations I have come across!
Hey Kevin! I just started watching some of your videos today and so far they have been really helpful! Thanks!
So glad to hear that Kristen!
The best explanation thus far. Extremely grateful!
Bra, I love you. I always forget the difference between absolute and relative but I just come back to this video of yours. :)
Absolute clarity in your explanation. Keep it up and thank you.
thanks, you made it easy to understand. And now I have unravel the mystery and finally can move on with my project.
BRO THANKYOU THANKYOU SO FLOWERING MUCH I WAS SO CONFUSED ABOUT POSITION ABSOLUTE AND RESEARCHED A LOT BUT YOU GOT THE CONCEPT CLEAR IN MY HEAD! I am subbing sire!
Very concise, clear and easy to understand. Thank you so much for this video!
You're the best! I learned so much from you! Really like the way you teach, very clear and concise!
Awesome mate. Thanks for taking the time to make the vid and beautiful example/ explanation.
I accidentally made a div appear along with its contents inside td correctly and got curious to know how it worked. This video made everything clear.
thank you so freaking much i had been scratching my head form last 4-5 months read different articles saw a couple of videos on this topic but none of them helped me understand that how are these related and as well as different from each other and most importantly after watching this video i know how and when to use absolute.
Glad It helped you out!
Hi Kevin, I've been using a website designed to teach code and have learned a lot from that. No one way of learning is perfect though, and I've been supplementing a lot of that material with your videos because you tend to take a deeper dive into specific aspects of code and provide a lot of helpful insights as well as peripheral information that makes piecing things together easier. Thanks so much for your helpful videos!
hey can u pls share the name of the site
@@naksuy freecodecamp. They also have a channel on youtube. I learned html, css, and js on their website. It's pretty thorough in my opinion.
Nearly thought I was not Smart, just to learn that I looked the wrong places. Thanks buddy❤️
Thanks Kevin. Your Videos always helps to understand the basic concept of CSS.
7:35
Makes more sense? You solved a 2-year trying to understand how it works problem...from articles to 30min videos, and this masterpiece made it a lot simpler...
So happy that I could help :D
you should not watch 30-min vids before you've done the samler ones like this one - that's the insight here...
Great video! Exactly what I needed to add a button to the middle of a container with a header image. Thank you!
3 minutes in and I’m already thanking you for taking the time to explain exactly what the properties mean in a way I can easily grasp.
#Subscribed
Exact what I was waiting for and always wanted to know. I am a senior webdesigner, but still learn. Thank you!
this was the best explanation I've seen about css positioning! thanks a million!!
I've watched many videos but this video is really helpful for me.
I love you for making these videos so easy to understand
Thanks Kevin, you sure know how to break down concepts. Lovely.