CSS Positioning: Position absolute and relative explained

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!

---

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

[stevenzhang]

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.

[goldfinch]

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

[munch]

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

[RameenFallschirmjager]

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

[KENAXION]

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!

[ashimgautam]

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

[Mwtorres]

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

[AJ-jjgs]

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.

[DaWali]

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

[zainabedin]

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

[jasonwang]

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

[BigFatSandwitch]

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

[roiborromeo]

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.

[baileyreyes]

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

[Dextergec]

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!

[JIuHo]

Your channel is a gem for someone who is learning CSS <3 I think you were born to teach people

[Fatima-zdel]

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

[zlatasupinka]

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

[TWspk]

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

[petropzqi]

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