CSS Positioning: Position absolute and relative explained

Подписаться 912 тыс.

Просмотров 420 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 841

@stevenzhang8620 Год назад

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.

@munch6814 5 лет назад

This thing used to make my head hurt. Thanks a lot for explaining it clearly

@goldfinch5522 4 года назад

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

@kavinbharathi 2 года назад

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 🤣

@essentialaffiliatemarketing 2 года назад

I always want to go from beginner to expert in 2 steps instead of using as many steps as possible and learning the fundamentals

@theBillonaire 2 года назад

Yeah me too , this video helped a lot

@selhichakib Год назад

@@kavinbharathi I can't even consider CSS like a language

@0x7F9B2A 7 месяцев назад

what do you consider it then?@@selhichakib

@RameenFallschirmjager 4 года назад

Although quality is a relative subject, the quality of this channel is absolutely superb!

@KevinPowell 4 года назад

Haha, nice. And thanks!

@aniketsatpathy1532 4 дня назад

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

@DaWali1000 5 лет назад

My mom enters my room and a grown man talks about playing around with the child, well...

@siamonadi7997 5 лет назад

you have the dirtiest mind of all human beings ever

@myriam5662 3 года назад

😂😂

@vanman118 3 года назад

lol i heard that and was instantly like *hold up.*

@tiqo8549 3 года назад

😅

@FM-zr1rw 3 года назад

lol its youtube not darkweb 😂🙌

@AJ-jj1gs 4 года назад

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.

@prabhakaranjeyamohan4579 2 года назад

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

@4MXW 2 года назад

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.

@chelseywilkes8518 3 года назад

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!!!

@skoolie_life3261 4 года назад

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.

@worldshaper1723 3 года назад

Are you good now?

@bikibalami4829 Месяц назад

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.

@zainabedin9842 4 года назад

I was struggling with this concept for years and you managed to explain it so simply. Thanks

@KENAXION88 2 года назад

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!

@Mwtorres89 2 года назад

I love the way you explain things, simple, no over explaining.... THANK YOU

@sridharbelide 6 лет назад

Actually position:absolute will look for non-static parent not only parent with position:relative

@KevinPowell 6 лет назад

Yup, you're right, it was an oversight of mine when I mentioned that :\

@motocutepathanahmedshahcut4964 5 лет назад

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 5 лет назад

WHAT NON-static means?

@elephant_888 5 лет назад

@tolstoievski4926 5 лет назад

sticky is cool for example if you want your hamburger or your menu be here anywhere you scroll to the page

@BigFatSandwitch 3 года назад

I watched several other videos on youtube but this is by far the best in explaining css positioning. Loved it

@jasonwang5085 3 года назад

Best explaination I have seen so far. Very clear and easy understanding. Thank you for the video mate!

@mrx-qi8th 3 года назад

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

@Fatima-zd4el 2 года назад

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!!

@TWspk66 3 года назад

The most clear explanation of "relative" & "absolute". Thanks!!

@JIu4Ho Год назад

Your channel is a gem for someone who is learning CSS

@ashimgautam4137 Год назад

Just know that Devs around the world don't take you for granted. Your videos help me keep my job.

@baileyreyes8768 4 года назад

This video is a gem. Mystery solved. Thank you, I would love to see more videos like this one!

@roiborromeo7921 Год назад

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.

@holycrapluvthisvid 2 года назад

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

@abuzarmahmood5179 Год назад

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.

@KevinPowell Год назад

Thanks so much!

@Dextergec413 3 года назад

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!

@lawrencepsteele 3 года назад

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.

@chanm01 4 года назад

Accurate, concise definitions and clear, illustrative examples! Very well done!

@zlatasupinka 5 лет назад

This is truly awesome! Thanks - you just saved me hours searching for a solution!

@petropzqi 4 года назад

I love this short format. Just one topic here and there. Keep up the great work

@Meleeman011 4 года назад

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.

@michaelthum3575 6 месяцев назад

Your videos explain in 5 minutes these concepts, where I have spent hours searching through documentation. Many Thanks

@forrestalward3312 3 года назад

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

@sachinms1258 5 лет назад

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.

@zoeeltringham4340 5 лет назад

Thank you Kevin, I could not quite understand position and relative but you explained it in a way that works for me

@tofulosophy 4 года назад

Thanks Kevin! This is one of the simplest explanations I have come across!

@sinansalameh 3 года назад

Finally, some one explains this very simply, big thanks Kevin.

@ratubs60 9 месяцев назад

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

@bhaaratsharma6023 4 года назад

This explanation was the best I have seen on youtube. Kudos to you.

@adam-user 9 месяцев назад

Kevin, you are a genius in explaining CSS a simple way. I never understood position absolute/relative - until TODAY. Thanks!

@ABanksy Год назад

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

@hiddenwasabi 3 года назад

Very concise, clear and easy to understand. Thank you so much for this video!

@andrewwarren654 Год назад

Awesome mate. Thanks for taking the time to make the vid and beautiful example/ explanation.

@geraldwarren5891 Год назад

Thank you for taking the time to post this video. It was very helpful.

@aubreygonzalez4715 2 года назад

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.

@Alejoblocks 4 года назад

Gosh! The simplicity with which you explained it, thanks a lot!

@ppchan1 Год назад

Thank you Kevin ! I always confuse about absolute and relative position. I got better understanding of how they work after this video.

@FourGamingILFGIL4Fever 3 года назад

THANK YOU! The best tutorial I've seen so far.

@joycemeow5857 3 года назад

You're the best! I learned so much from you! Really like the way you teach, very clear and concise!

@rajkumark3555 3 года назад

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

@sulmantalib5479 2 года назад

Thanks Kevin. Your Videos always helps to understand the basic concept of CSS.

@Kristen_85 5 лет назад

Hey Kevin! I just started watching some of your videos today and so far they have been really helpful! Thanks!

@KevinPowell 5 лет назад

So glad to hear that Kristen!

@BobbyHarris 3 года назад

Great video! Exactly what I needed to add a button to the middle of a container with a header image. Thank you!

@VioletYT 4 года назад

This really explained LOTS of things! And made me subscribe immediately.

@danielcardone8622 2 года назад

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.

@Kevin-lh3ig Год назад

After really watching 3 videos, I finally understood relative and position. Love your content and keep it going.

@ahadnazari9110 2 года назад

The most clear explanation of "relative" & "absolute". Thanks!!🤩🤩

@laurentiu3965 10 месяцев назад

Thanks man. You help me a lot with this. Good luck with your channel

@vaibhavdixit8546 3 года назад

Thank you for explaining this in such short yet clear way

@richcaro3132 2 года назад

Absolute clarity in your explanation. Keep it up and thank you.

@artemiscy1194 3 года назад

I come here every now and then to refresh my knowledge on CSS Positioning. Cheers!

@bambubombon 4 года назад

this was the best explanation I've seen about css positioning! thanks a million!!

@ronstubed 3 года назад

I have never understood this, until now. You are a pro teacher.

@thaleiavavanou5766 Год назад

I love the way you explained it! Well done!

@kairo007 3 года назад

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.

@ricardofilipecarmopauleta8257 4 года назад

Thanks, man. That was a great video! And the tip about the z-index was also really helpful :)

@abdulmuhaminrehman7530 2 года назад

wonderful and simple explanation!!!!! KUDOS to you Kevin !!!!

@TheCiarave 3 года назад

I love you for making these videos so easy to understand

@masomahboob 3 года назад

Best tutorial on positioning I have seen so far.

@sunmonu-adedejiolawale4959 8 месяцев назад

Thanks Kevin, you sure know how to break down concepts. Lovely.

@voidmansions 4 года назад

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.

@xen5219 2 года назад

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

@phillipbarlow2011 3 года назад

Perfectly explained, this topic used to hurt my head so much, not anymore, thank you!

@timothyspinks8398 2 года назад

The best explanation thus far. Extremely grateful!

@abdilwadudbisinle6812 3 года назад

Been struggling with for a week now... And yo vid made it hella simple 💯 Thank you very much 👌🏽 🔥

@cindykee3719 4 года назад

I finally understand position relative and absolute! Thank you!

@zolisawelani9338 4 года назад

Bra, I love you. I always forget the difference between absolute and relative but I just come back to this video of yours. :)

@arthy7901 3 года назад

Thank you for this explanations, you made it so easy to understand!!

@danielasema9560 2 года назад

Im doing a css course on Udemy and the positioning wasnt adequately taught. This tutorial cleared things up for me. Thanks a lot.

@abdirahem221 4 года назад

CSS position was the hardest thing to undestand untill i met this video. you're absolutely good and undestandable teacher.. thnks 1000 times 😍

@towshiferabbi8009 4 года назад

your tutorials are always so helpful. thanks!

@urbanbiscuitz6918 Год назад

Exact what I was waiting for and always wanted to know. I am a senior webdesigner, but still learn. Thank you!

@whatsaguygottado2669 4 года назад

Kevin! Nice video - I LIKE the 5 minute format videos. Helpful without getting lost in the weeds....

@steffqing 2 года назад

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 🙇

@hushambasil3123 3 года назад

Hi Kevin, Thank you so much and massively grateful to you. you made things making sense and clear, you are a great teacher

@Aliante4 Год назад

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

@patrickbroaden9820 3 года назад

This video deserves a million thumbs up. 👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾👍🏾

@aoyonnil5752 2 года назад

Actually man u deserves a big thumbs up every time your videos really help me a lot liked and subscribed

@mahangk2714 2 года назад

Great Video! thanks for sharing your knowledge in such a great way.

@AmitKumar-ft7em 4 года назад

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.

@KevinPowell 4 года назад

Glad It helped you out!

@ariaalex9067 5 лет назад

wow this is the most clear explanation on this topix. been suffering to understand this

@mhmmdshaz98 2 года назад

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.🥺.

@Anatolii- Год назад

Great explanation! Without pushing a sale on you. Much appreciated!

@Ceez747 Год назад

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.