Position absolute and responsive layouts

🎓 - I have a free course on conquering responsive layouts: courses.kevinpowell.co/conque...
A lot of people struggle with responsive layouts, and even more so when they use position: absolute. In this video I'm looking at how we can work with position absolute in a responsive way 🙂.
🔗 Links
✅ The Frontend Mentor project: www.frontendmentor.io/challen...
✅ My Code: github.com/kevin-powell/fem-c...
⌚ Timestamps
00:00 - Introduction
01:35 - The HTML
03:12 - Setting things up the right way to use position absolute
05:47 - Why you need a defined space for your positioned elements
07:40 - Positioning in relation to the element’s containing block
12:50 - Emulating padding with position absolute
18:17 - Applying this to larger layout pieces
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@Username-em1oe]

I just want to say that you are the best educator on CSS. You have given me the ability to understand CSS at a much deeper level. Keep doing what you're doing. It is very much appreciated. Thanks Kevin

[@clevermissfox]

Seconded! Probably more like 70 thousanth-ed

[@daveturnbull7221]

I need to start taking serious notes from your videos. You keep giving us so much info that a lot of it is getting lost in the mess I like to call my brain. Life was so much easier before finding your channel and getting exposed to just how powerfull CSS actually is (not just for setting colours etc). Anyway, I'm off to put in a bulk order for notepads...

[@KevinPowell]

Like Super Mario said, something like Notion might be perfect (it can seem overwhelming because it's so customizable, but there are starter templates for note taking and stuff). It's really handy. I do think written notes are useful too, and I think writing by hand and scribbling out drawings and stuff has a lot of benefits, but being able to quicky reference stuff is always great.

[@outpost31737]

Create a folder on your PC/MAC call it something like 'My Webkit' and add your snippets there for easy reference. Works for me :)

[@cekuhnen]

The nice thing is he comes from print and gets the confusion…

[@ob5804]

​@@KevinPowellKevin, hello. I have a problem with slider's arrows. When arrows are next to each other, but positioned absolutely, along the container, and when the window is narrowed, the arrows move to the center (Can this approach solve that?

[@TheMsWrong]

I used to absolutely dread any time I had to work with position: absolute but you really helped me understand it much better!

[@leolecee9405]

Just as clear, synthetic and practical, as usual 🤓 And as I'm just tackling my first form / form-validation project, it would be awesome to see your approach to that kind of things. Thanks again for everything you're doing 👌

[@mikefernandez403]

Thank you very much Kevin, I was kind of stuck trying to create a brackground-img for this exercise and you solved all my problems x) I learned so much from your tutorials. Thanks for making people love CSS !

[@greentea2430]

Hi, Kevin! Just wanted to say that your style of teaching and explaining stuff is absolutely brilliant, I've been with the channel for 3 months and never missed a single video. It helps me a lot in fighting my anxiety, so thank you very much ; - ). It would be wonderful if you could deep dive into the forms in one of the future videos, particularly into the js side of things. It is always so confusing to get forms nice looking and perfectly working, so yeah.

[@StopLossDill]

Thank you for this. You have helped me more than you could imagine. All my responsiveness-related bugs are instantly fixed after watching this video. This overlapping card concept is so cool. Thanks for years of great content man.

[@clevermissfox]

I had no idea you could set up your child elements like the name and card number to absolute, and THEN give that parent a positon absolute too. Obvisouly there are specific use cases this would be applied and i try to avoid it but i just assumed if you took off relative from the parent everything would break. This channel is amazing. So generous

[@daniru2505]

Awesome video. I currently have a project requested by my father. I encountered a problem about layouts and your CSS grid tutorial from a year ago helped me. I still have a page to do that will deal with position absolute and this came in clutch.

[@iwannabekoshka]

I did not know that you can use "position: absolute" and arrange elements relative to it, always did one more wrapper with "position: relative"... Thank so much, you made my life easier

[@BallEcomThatthana]

Thank you Kevin as always great content

[@stephanechataignie]

Great tutorial as usual. A full serie for doing a great form with its validation will be great

[@dre429]

Thank you so much this has helped me a lot with one of my projects and even the small off-topic note was very helpful to me and taught me something. Thank you for such quality teaching!

[@oliverstbng6329]

I thought i was already in love with css, but since i discovered your channel i know what it means to really be in love with css. You do a great job and inspire me. Greetings from germany.

[@AJ-1404]

Just when I needed this for a project! Thank you Kevin :)

[@pravinkori3381]

Really amazing and very insightful. Been watching your videos and it really has made me fall madly in love with CSS. I'd really love to have another video on creating form.

[@bobdinitto]

Very interesting and thought provoking. Thanks, Kevin. CSS positioning always seems like Alchemy to me. But I'm slowly starting to wrap my head around it.

[@lorenainfanter.3099]

I'm learning a lot with every video you post! Thank you very much!!

[@moroccowave]

I like the way you explain things. You are really helpful. Thanks Kevin :)

[@rvoitiv]

Learning something new from each of your videos. Though the video itself is about position absolute, that “margin-left:auto” trick was really neat. Thanks Kevin!

[@dennisllopis2478]

Amazing content. Thank you Kevin!

[@deanlane]

Thanks, Great guide. It's funny, just as I am working on a similar problem on my projects you come along and put out a new guide solving the issues I'm having lol. Thanks

[@WilledWest]

woooooooww, I just the opened the youtube app on my phone basically to check out tutorials on how people went about working on this card project particularly , not knowing Kevin had worked on it already and has posted it, and I've been on youtube a few times since yesterday, but didn't see this, today that I wanted to search out the problem, kevin's video was the first on my youtube, haven't even searched it already. if this is a sign for me not to give up on coding , I'll think about it. lol, thanks Kev❤

[@vimvexvimvex8780]

Perfect! Many thanks!

[@ntwalimudasubiragustave7343]

So helpful man... The problem was just solved before finishing the video

[@jorgegamboa5408]

awesome kevin, i have learned a lot from this channel.

[@rodglennrojas3067]

I immediately liked and subscribed your channel, it works like magic. thank you.

[@arifulhaque3236]

Thanks a lot sir...can't control myself to thank you for everything in comment section.

[@NiceChange]

Love this. Solved so many issues.

[@LuxKG]

As a teacher on different field (insert "c'mon guys, it's not a music theory" meme here 😆 ), I have to say that you nailed it with explanation! Outstanding job! Cristal clear. Thank you for all those tutorials!

[@Technoph1le]

21:00 Didn't know that `position: absolute` would act as relative to its absolute positioned children. 👍

[@dave6012]

Yeah, that was a serious departure from my understanding, but lady CSS is actually on our side with that one 🤷

[@sickysore]

I appreciate this video so much, thank you kind person! Very useful and easy to follow.

[@kirby6362]

Today I realized that, after watching ~100 Kevin Powell videos, his opening is not “Hello my friend and friends”. 😂 I always thought it was so cute and personalized that he would greet me as his friend lol

[@davidcbeaudoin]

Ah yes, absolute positioning... my old arch nemesis. Lots of good stuff in here though that I wasn't aware of. I've been out of the CSS game for a while, only recently dove back in while updating a site I coded years ago. Thanks for the great lesson/overview.

[@wahyusa]

Thank you ! I've got lot of new insights

[@stepheninnocent9540]

I have learned so much from u I can now arrange my flex box very well

[@justsaybobby]

Yes let's look at that in the future.

[@daveskye]

Please more on forms! I use them a lot in projects and having some fresh ideas would be helpful.

[@VVigneshwaranMSEC]

Actually I am doing project and really stuck in position property and correct time it's help me. Thank you man✨

[@SidBarnhoorn]

This was great and very helpful! Thank you! :)

[@ruthy08]

6:54 - this is the epitome of the meme. "Why does that not work." I love that you left that in.

[@frankroos1167]

Everything is related to the parent element...except font-size. That's still in rem. With container, that can be done too. I tried it before. It allows us to change the size of the parent element without breaking the layout. Useful to make it a "module" type thing that can change nicely when the designer desides it has to go differently. Admitted, that has nothing to do with the subject, position absolute. But it is a nice addition when it comes to the responsive aspect.

[@proteus1]

Another quality demo from Front Ender Mentor. CSS is the Web.

[@phucnguyen0110]

Another legendary project from Frontend Mentor, haha xD

[@malamhari_]

It's gonna be cool and very informative if we can continue finish this project sir

[@david1801]

I was just struggling the whole day keeping the cards in place. Thanks

[@zakieed9554]

this is the best css chanel for peoples whos english is the second language 🤍

[@md.ataurrahmansharif5305]

Thank You very much

[@0xtz_]

I hade this problem just last night 😂😂😂 👌🏼 man u fixed the problem

[@dragonnexs3621]

Kevin, I like the fact that some of your video are made to help young developers learn more about the css, but you still end up including some obscure properties without explaining too much about it because it is not the purpose of the video. I consider myself good at css but I clicked the video just in case I'm missing on something and I ended up learning about the "revert" value that you used on the max-width. Your videos never disappoint me, good job and ty for your work! 👍

[@exsitewebsolution6803]

Absolutely brilliant! Please please PLEASE make a video for a responsive CHAT UI

[@christopherbarber7705]

thank you again sensei

[@kylevandeusen]

Epic tutorial!

[@dougphillips5686]

Great info.

[@catherinegreen7454]

Love the DFTBA top!

[@clevermissfox]

I’d be interested in a video looking at revert and initial and their differences ❤

[@sovereignlivingsoul]

positionng is such a tiresome process sometimes, great video Kevin, on the question of forms, i have been looking into the proper uses for aria with my code, forms can be improved with aria, so maybe do something on when to use aria in forms

[@sas3021]

thank you

[@marcorosenbaum9900]

Nice!

[@michalnowak2181]

thx kevin :)

[@Paulo280713]

great content

[@kevinfisher7032]

As always, an excellent demo. In my experience after hours of trying to get "position:absolute" to work (we’ll gloss over the swearing and hair pulling) the solution usually comes down to one question-Have you set or where are you setting position:relative? These days that’s usually the first thing I think about if I’m gonna be using absolutely positioned divs.

[@sukumizune2477]

Great tutorial as always. What would you recommend if you needed the positioned elements to scale with the container?

[@Udaykumar-rt5di]

Hey @Kevin Powell your videos are really and really informative. Can you make a video on how should one code thier web app for thier company or bringing it live for other users to use. I heared some stuff like dependenies from my friends but didn't unerstand much about it.

[@lesnaSvalka]

23:51 Kev, be careful with the glasses, man. 😆Love your videos, keeup it up!

[@handsome_man69]

Love love love

[@onlyzach1]

Great video as always! Would love to see a full build out video with doing the background on it as well. Any reason you used 960px on the media query? Thought you were only using rem for the most part now.

[@KevinPowell]

Fort the media query, I just threw something on there, I sometimes use pixels in more beginner friendly videos to avoid having to talk about it, lol. Using anything other than pixels becomes a sticking point for some, and for media queries, it doesn't make a difference really. The one unit that is the most consistent in media queries is em though, because of a strange zoom thing in Safari, but it's a very small detail

[@enigma2303]

Yes I need this so much tomorrow is the freakin deadline of our project.... 😭

[@KevinPowell]

Good luck!

[@justsaybobby]

YES!

[@eggsforbacon]

Seriously dog where do you have the microphones. This is super useful right now, thank you!

[@thevishalvadher]

Hello Kevin Sir i watched most of your videos and learn lots of things about css and html BIG THANK YOU for that i have 1 request for you can you make video for responsive website with HTML & SCSS please i want to know how to organize scss files on real world websites. thank you;

[@Sarm8]

Wonderful tutorial! Super informative. Quick question, is there any reason not to put all the elements inside the card image rather than in a parent container?

[@muisadinam9615]

I was just wondering about the same question 👍 Maybe @KevinPowell can answer this one? 🙏

[@xiggywiggs]

please please please do a video on forms and validation!!!

[@oreki1996]

Can you make a tutorial on How to be a genius like Kevin Powell next?

[@AntonioBenderas]

@Kevin Powell please make a video what is the difference between % vs. em font-size

[@KevinPowell]

When used for font-size, they're basically the same thing. 1em = 100%, 1.25em = 125%, etc.

[@lalit-singh-bisht]

you are on a whole another level...I just can't keep up with you

[@aoussabah]

Thank you for this very valuable video! I have one question though, in 10:16. doesn't CSS rule with (max-width: revert) override the (max-width: 100%) rule for elements of .card-front_bg?

that was very helpful. although I would use background color instead of border or outline color. that way it would not add the border size to the box.

[@KevinPowell]

You can also use outline, just like border but with no actual impact on the size ☺️

[@JosBlomsma]

'Magic numbery' 🥰

[@justinanderson267]

You may be able to avoid the "magic number" in the CVV section by doing bottom: 50% instead of top:44%

[@NorthTonawanda1]

There's 3 ways to learn these tricks: (1) Watch the video all the way through (never works.) (2) Watch all the way through, pausing, rewinding, focusing incessantly and spending 3x longer than step one (this kind of works, but not really.) (3) Roll up your sleeves and play along (this works, but you still need to pay close attention.) I need to get better at step 3.

[@LordBecher]

Hey Kevin, well done explanations, but could you do me a favor? Surprisingly many people have sight impairments, very often issues with differentiating red and green, could you try to replace one of them in your borders? You are such an educated, helpful person, but I struggle a bit with the visuals sometimes :)

[@KevinPowell]

For sure! I try to go with high-contrast colors compared to my backgrounds, but never really took that into accouotn when I should have. Correct me if I'm wrong, but if I avoid reds/pinks/oranges as a rough rule of thumb, it should be alright?

[@LordBecher]

@@KevinPowell I am not that knowledgeable, but I know that red-green color deficiency is by far the most common, 10% of men and 1% of women are affected. In these cases not contrasting red and green is enough already, in more rare forms like color blindness (mono/dichromacy) you'd probably try to use colors with very different hue or saturation, full color blind (achromatic) people can only differentiate the value of the color.

[@joshuakirby6952]

If you have heavy elements (i.e., complex svgs or filters), would "transform()" be better for performance?

[@fabianmichael9457]

An alternative to using img tags is using aspect-ratio

[@KevinPowell]

100% :)

[@codeme8016]

Wondering why not using Flex to locate some of the items?

[@androidetube]

what is the reason for "min-block-size: 100vh;" on ".content-grid" ?

[@allan_archie]

How did you do the dark mode toggle?

[@arnavsshah]

GOD!

[@Tony.Nguyen137]

Hi. Can you make a video about the css property contain? Apparently this css property improves the performance of a website but I don’t understand the documentation :-(

[@KevinPowell]

I was using it today and thought to myself I should make a tutorial on it 😂 It can improve performance in specific situations, but it's a little niche so I wouldn't worry too much about it

[@saaika5922]

From where are you getting those projects? I would like to do some designed, instead of designing everything on my own.

[@simoncallelaverde]

Please read my other comment on "background-images" vs "imgs", and the why.

[@waleedsharif618]

What do you think of tailwind ? I just started to learn it and html looks too messy with tailwind

[@KevinPowell]

I'm not the biggest fan in the world :D

[@USPSLaura]

why do you prefer to use unit rem or em instead of px

[@outpost31737]

The funny thing about websites is that they're responsive by default it's only when we apply our styles that problems occur!

[@KevinPowell]

100%

[@OCEMTechZone]

🎉

[@justinkelley111]

I was told that whwen you go to put a website up, they won't be visible to search engines. I guess we have to insert something into our code, I was told that this was a local plus link? How do we do that?

[@nomadshiba]

tbh as you said grid would have been a lot less painful for something like this can make this responsive too without using @media EDIT: also you can move the card number to center using left: 50%; transform: translateX(-50%);

[@RealCaptainAwesome]

How do you handle a main-content element being < the height of the window? I have found min-height: 100vh is that okay? I focus on backend development, so css wizardry is confusing and scary

[@KevinPowell]

Ideally, min-height: 100dvh, which will adapt to the mobile UI elements that move in/out, but browser support isn't amazing yet, so 100vh is fine for now, unless you run into an issue on mobile that might take a little mucking around to fix

[@RealCaptainAwesome]

@@KevinPowell thanks. I remember why WordPress was so frustrating back in the day now.

[@coecemalomijebolje]

😊

[@TheOKest]

Question from a new learner, why code all the informaion on the card if you could just upload an img with the credit card information and logo already on it?

[@KevinPowell]

Part of this challenge (where I had the "form goes here"), is to make the credit card information update as it's typed into the form, so to do that, it needs to be code :)