Position absolute and responsive layouts
Vložit
- čas přidán 26. 07. 2024
- 🎓 - 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 CZcams 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!
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
Seconded! Probably more like 70 thousanth-ed
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...
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.
Create a folder on your PC/MAC call it something like 'My Webkit' and add your snippets there for easy reference. Works for me :)
The nice thing is he comes from print and gets the confusion…
@@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?
I used to absolutely dread any time I had to work with position: absolute but you really helped me understand it much better!
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
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 !
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 👌
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.
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.
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
Great tutorial as usual.
A full serie for doing a great form with its validation will be great
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.
6:54 - this is the epitome of the meme. "Why does that not work." I love that you left that in.
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.
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.
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
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.
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!
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!
Just when I needed this for a project! Thank you Kevin :)
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
I like the way you explain things. You are really helpful. Thanks Kevin :)
I'm learning a lot with every video you post! Thank you very much!!
I immediately liked and subscribed your channel, it works like magic. thank you.
21:00
Didn't know that `position: absolute` would act as relative to its absolute positioned children. 👍
Yeah, that was a serious departure from my understanding, but lady CSS is actually on our side with that one 🤷
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❤
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!
Amazing content. Thank you Kevin!
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.
I appreciate this video so much, thank you kind person! Very useful and easy to follow.
awesome kevin, i have learned a lot from this channel.
Perfect! Many thanks!
Love this. Solved so many issues.
This was great and very helpful! Thank you! :)
Thank you ! I've got lot of new insights
So helpful man... The problem was just solved before finishing the video
I have learned so much from u
I can now arrange my flex box very well
Please more on forms!
I use them a lot in projects and having some fresh ideas would be helpful.
Thank you Kevin as always great content
Thanks a lot sir...can't control myself to thank you for everything in comment section.
Another legendary project from Frontend Mentor, haha xD
Another quality demo from Front Ender Mentor. CSS is the Web.
It's gonna be cool and very informative if we can continue finish this project sir
I hade this problem just last night 😂😂😂 👌🏼 man u fixed the problem
Actually I am doing project and really stuck in position property and correct time it's help me. Thank you man✨
I was just struggling the whole day keeping the cards in place. Thanks
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.
Epic tutorial!
Yes let's look at that in the future.
Great info.
thank you again sensei
Absolutely brilliant! Please please PLEASE make a video for a responsive CHAT UI
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! 👍
Thank You very much
I’d be interested in a video looking at revert and initial and their differences ❤
great content
Nice!
Love the DFTBA top!
Great tutorial as always. What would you recommend if you needed the positioned elements to scale with the container?
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.
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
thx kevin :)
23:51 Kev, be careful with the glasses, man. 😆Love your videos, keeup it up!
thank you
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.
Love love love
Yes I need this so much tomorrow is the freakin deadline of our project.... 😭
Good luck!
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.
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
YES!
please please please do a video on forms and validation!!!
Seriously dog where do you have the microphones. This is super useful right now, thank you!
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?
I was just wondering about the same question 👍 Maybe @KevinPowell can answer this one? 🙏
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;
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?
Can you make a tutorial on How to be a genius like Kevin Powell next?
'Magic numbery' 🥰
@Kevin Powell please make a video what is the difference between % vs. em font-size
When used for font-size, they're basically the same thing. 1em = 100%, 1.25em = 125%, etc.
If you have heavy elements (i.e., complex svgs or filters), would "transform()" be better for performance?
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.
you are on a whole another level...I just can't keep up with you
How did you do the dark mode toggle?
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.
You can also use outline, just like border but with no actual impact on the size ☺️
You may be able to avoid the "magic number" in the CVV section by doing bottom: 50% instead of top:44%
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 :)
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?
@@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.
Wondering why not using Flex to locate some of the items?
GOD!
From where are you getting those projects? I would like to do some designed, instead of designing everything on my own.
why do you prefer to use unit rem or em instead of px
what is the reason for "min-block-size: 100vh;" on ".content-grid" ?
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?
An alternative to using img tags
is using aspect-ratio
100% :)
What do you think of tailwind ? I just started to learn it and html looks too messy with tailwind
I'm not the biggest fan in the world :D
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 :-(
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
Facebook on profile page while scroll goes to bottom how to position changed on can please make a video on it
I recently discovered that setting _veritcal-align: bottom;_ on _img_ will get you the same result as setting _display: block;_ on it :)
yes! because images are inline, they leave a space for the descender (letters that stick out the bottom, like j p q etc.) and that aligns it with the bottom instead :)
Please read my other comment on "background-images" vs "imgs", and the why.
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
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
@@KevinPowell thanks. I remember why WordPress was so frustrating back in the day now.
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?
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 :)
🎉
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%);
10:18 Why is there space in the bottom of the image? The default display value is "inline". Since there are no other elements in the flow, why is there still distance?
Because it can go inline with text, and letters like j, y, etc have decenders. That space is because it sits on the baseline (the bottom for most letters), and leaves room for those decenders under it. All inline content will have space for the decenders.