CSS Positioning: Position absolute and relative explained
HTML-код
- Опубликовано: 25 июл 2024
- CSS positioning properties can be a pain to understand. In this video, I look at the basics of Position Absolute, and how it's affected when we add Position Relative to a sibling and parent elements.
Understanding how absolute positioning works in CSS will give you a huge boost to what you can accomplish in your designs!
CodePen to follow along: codepen.io/kevinpowell/pen/jJ...
---
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
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 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!
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 😂🙌
I was struggling with this concept for years and you managed to explain it so simply. Thanks
Just know that Devs around the world don't take you for granted. Your videos help me keep my job.
Best explaination I have seen so far. Very clear and easy understanding. Thank you for the video mate!
I love the way you explain things, simple, no over explaining.... THANK YOU
Your channel is a gem for someone who is learning CSS
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
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
This video is a gem. Mystery solved. Thank you, I would love to see more videos like this one!
This is truly awesome! Thanks - you just saved me hours searching for a solution!
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 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?
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!!
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 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.
Accurate, concise definitions and clear, illustrative examples! Very well done!
I love this short format. Just one topic here and there. Keep up the great work
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
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
Thank you for the video...was trying to find an article/video where someone explains the concept of absolute vs relative in a simple way.
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
Your videos explain in 5 minutes these concepts, where I have spent hours searching through documentation. Many Thanks
Very concise, clear and easy to understand. Thank you so much for this video!
This really explained LOTS of things! And made me subscribe immediately.
Awesome mate. Thanks for taking the time to make the vid and beautiful example/ explanation.
Finally, some one explains this very simply, big thanks Kevin.
Thanks Kevin! This is one of the simplest explanations I have come across!
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
You're the best! I learned so much from you! Really like the way you teach, very clear and concise!
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!
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.
Thank you Kevin, I could not quite understand position and relative but you explained it in a way that works for me
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.
Thank you for taking the time to post this video. It was very helpful.
Yes! thank you! I don't do front-end work every day and always forget this.
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.
Thanks, man. That was a great video! And the tip about the z-index was also really helpful :)
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.
Gosh! The simplicity with which you explained it, thanks a lot!
Bra, I love you. I always forget the difference between absolute and relative but I just come back to this video of yours. :)
This explanation was the best I have seen on youtube. Kudos to you.
Kevin, you are a genius in explaining CSS a simple way. I never understood position absolute/relative - until TODAY. Thanks!
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
Great video! Exactly what I needed to add a button to the middle of a container with a header image. Thank you!
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
Thank you Kevin ! I always confuse about absolute and relative position. I got better understanding of how they work after this video.
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.
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.
Hi Kevin, Thank you so much and massively grateful to you. you made things making sense and clear, you are a great teacher
I come here every now and then to refresh my knowledge on CSS Positioning. Cheers!
Thank you for this explanations, you made it so easy to understand!!
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
After really watching 3 videos, I finally understood relative and position. Love your content and keep it going.
Absolute clarity in your explanation. Keep it up and 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
Thanks man. You help me a lot with this. Good luck with your channel
Exact what I was waiting for and always wanted to know. I am a senior webdesigner, but still learn. Thank you!
your tutorials are always so helpful. thanks!
this was the best explanation I've seen about css positioning! thanks a million!!
I have never understood this, until now. You are a pro teacher.
THANK YOU!
The best tutorial I've seen so far.
really helpful - i get it now, thanks for making this video. Watched your other tutorials too, they're great. Keep them coming!
Very great, glad that it helped, and that you've been enjoying my content :)
That background you have there just burns my eyes so much. Maybe i should go out more often :D. Great video btw
I finally understand position relative and absolute! Thank you!
Great Video! thanks for sharing your knowledge in such a great way.
I love the way you explained it! Well done!
Thank you! You were able to help me understand. I tried googling the different between absolute and relative but I kept getting these complicated explanations.
really love this, thanks for making the video!!
Thanks Kevin. Your Videos always helps to understand the basic concept of CSS.
Thank you for explaining this in such short yet clear way
Kevin! Nice video - I LIKE the 5 minute format videos. Helpful without getting lost in the weeds....
Been struggling with for a week now... And yo vid made it hella simple 💯
Thank you very much 👌🏽 🔥
This makes a lot more sense than the convoluted explanations ive read in the past.
Thank you very much for the great explanation.
I love you for making these videos so easy to understand
Perfectly explained, this topic used to hurt my head so much, not anymore, thank you!
Great explanation! Without pushing a sale on you. Much appreciated!
Boom, just what I needed to finally understand position relative and absolute. Thanks Kevin.
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 🙇
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!
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!
Best tutorial on positioning I have seen so far.
Actually man u deserves a big thumbs up every time your videos really help me a lot liked and subscribed
wonderful and simple explanation!!!!! KUDOS to you Kevin !!!!
I'm finally getting the hang of positioning and it's coming in handy for doing different layouts with bootstrap
The most clear explanation of "relative" & "absolute".
Thanks!!🤩🤩
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
Thank you so much, I couldn't understand ANYTHING before, but this is so clear and helpful 🙏🏽
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 the most helpful video so far!! Thank you :)
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!
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!
Thanks for making this concept easy to understand 👍🏾