Using CSS Position Absolute: some practical examples

A look at a few actual examples of using position absolute to make a nice looking, and responsive, card type component.

When I did my last video on CSS position relative vs absolute, a few people asked that I look at actual examples of it working, so I thought this would be a fun example. To make it even more fun, I look at a few neat tips and tricks that we can do with it as well. I probably go over the top here with different stuff, but I thought it would be a good opportunity to really explore some of the different things we can do with it.

For the most part, I use it position absolute on pseudo elements, )using relative positioning to keep my pseudo elements in the right place) since I'm usually using them as decorative elements, but I also look at how we can use it to put an image in the background as well.

---

---

---

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.

[ganeastefan]

Just wanted to say @kevin powell I've been browsing through your channel for the past few days, spending a few hours at a time and your content is so good I just don't even know where to start and where to keep going, sometimes. Thanks for your amazing work, it helps a ton!

[eddykagia]

This blew my mind. So subtle yet so effective

[trainerkellysnetwork]

I know this video is old, but I want to say THANK YOU! I struggled for hours trying to figure out how to align a button inside of a DIV element that was still responsive and I could not figure out how to do it. Google wasn't really showing me anything that was helpful. All it took was watching this video and being reminded that the parent element (in this case, my DIV) needed positioning itself. 😭 Thank you SO much for making this very clear tutorial! Thank you, thank you, THANK YOU!!!

[darshanpandya]

thank you kevin for all the amazing videos you share, i try to watch as soon as i got notified and try to use on my projects too.

[nlorens]

Thank you Kevin for explaining the logic behind every step, it is super helpful to understand the concept. I really enjoyed trying out this fun project :)

[sage]

The content on this channel is great, I'm learning CSS on my own as I'm working through CSSBattles, and this is a really nice way to augment that while also learning the proper way to do things to balance out any bad habits I'm forming with CSSBattles!

[nickbrown]

I've been struggling all day with the positioning of a responsive video iframe that was suppose to be about 1/3 of the screen wide and sit above the fold in the bottom right on all screen sizes above 992px wide.
After watching this video the solution seems so obvious and I can't believe I was being so thick. Thank you for kicking my brain back into gear 🤘

[yetanotherusername]

Your videos always clear up whatever impossible mess I've created in my code as I stumble through learning web coding. Thanks!

[seanpheneger]

Kevin, you know in Emmett you can type loremX (where x is the number of words you want it to generate) i.e. lorem10 and then tab and emmett will auto generate 10 lorem words instead of saving lorem bits on a different doc to cut and paste.
p.s. love the content. always learn something new every video you put out

[matthewashworth]

Thank you K-Pow love your videos, they make my corner of the web nicer, You are a star!

[A_Lesser_Man]

that looked great! yes, you could DRY it up a bit. and i had no idea you could do THAT to a shadow! wow. neat.

[Seantf]

Awesome showcase of the absolute position! Thanks for this a real inspiration!

[TheElkster]

Really loved the use of z-index and creating layers - losing luminosity with other elements having an rgba background has always stumped me - but this now explains how to avoid it! Thanks Kevin! :)

[nizamuddinshaikh]

Topic excellently explained! Now, I am clear about position : absolute. Thank you, KP. 😃

[westfield]

Thank you. Nothing like real world examples to explain this stuff.

[whatsaguygottado]

Interesting video! Gave me all kinds of things to think about w/ positioning. Keep-up the good work!

[chinmaykumar]

You made everything so much easy and clear . Thank you very much.

[miguelbm]

I had to do an AB testing for my work. This video helped me finish it :) thank you so much

[gilmoretj]

Kevin, I am a big fan of your videos, especially the Five-minute Fridays. One comment regarding CSS positioning: Absolute positioning is not dependent on an ancestor having a position property but on having an ancestor defining a position other than the default of static. Keep up the good work.

[DavidWyatt]

Excellent, as always! A great follow-up video would be writing the CSS that would allow this to degrade gracefully at mobile breakpoints. That's probably where most of us have the most problems.