Position absolute and responsive layouts
HTML-код
- Опубликовано: 13 июн 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 RUclips 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 used to absolutely dread any time I had to work with position: absolute but you really helped me understand it much better!
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?
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 👌
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.
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
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.
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 🤷
Great tutorial as usual.
A full serie for doing a great form with its validation will be great
Thank you Kevin as always great content
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!
I'm learning a lot with every video you post! Thank you very much!!
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.
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!
I like the way you explain things. You are really helpful. Thanks Kevin :)
So helpful man... The problem was just solved before finishing the video
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.
I appreciate this video so much, thank you kind person! Very useful and easy to follow.
Just when I needed this for a project! Thank you Kevin :)
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.
I immediately liked and subscribed your channel, it works like magic. thank you.
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.
Amazing content. 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 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
awesome kevin, i have learned a lot from this channel.
Thanks a lot sir...can't control myself to thank you for everything in comment section.
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
Love this. Solved so many issues.
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❤
Perfect! Many thanks!
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!
6:54 - this is the epitome of the meme. "Why does that not work." I love that you left that in.
Please more on forms!
I use them a lot in projects and having some fresh ideas would be helpful.
Thank you ! I've got lot of new insights
I have learned so much from u
I can now arrange my flex box very well
I was just struggling the whole day keeping the cards in place. Thanks
Yes let's look at that in the future.
It's gonna be cool and very informative if we can continue finish this project sir
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.
This was great and very helpful! Thank you! :)
Absolutely brilliant! Please please PLEASE make a video for a responsive CHAT UI
Another quality demo from Front Ender Mentor. CSS is the Web.
I’d be interested in a video looking at revert and initial and their differences ❤
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.
Actually I am doing project and really stuck in position property and correct time it's help me. Thank you man✨
Another legendary project from Frontend Mentor, haha xD
I hade this problem just last night 😂😂😂 👌🏼 man u fixed the problem
Thank You very much
Great tutorial as always. What would you recommend if you needed the positioned elements to scale with the container?
thank you again sensei
Love the DFTBA top!
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! 👍
Epic tutorial!
Great info.
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
23:51 Kev, be careful with the glasses, man. 😆Love your videos, keeup it up!
thank you
great content
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.
this is the best css chanel for peoples whos english is the second language 🤍
thx kevin :)
Nice!
Seriously dog where do you have the microphones. This is super useful right now, thank you!
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
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?
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? 🙏
Yes I need this so much tomorrow is the freakin deadline of our project.... 😭
Good luck!
please please please do a video on forms and validation!!!
Love love love
YES!
you are on a whole another level...I just can't keep up with you
@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.
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;
If you have heavy elements (i.e., complex svgs or filters), would "transform()" be better for performance?
'Magic numbery' 🥰
Can you make a tutorial on How to be a genius like Kevin Powell next?
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 ☺️
Wondering why not using Flex to locate some of the items?
From where are you getting those projects? I would like to do some designed, instead of designing everything on my own.
You may be able to avoid the "magic number" in the CVV section by doing bottom: 50% instead of top:44%
How did you do the dark mode toggle?
what is the reason for "min-block-size: 100vh;" on ".content-grid" ?
why do you prefer to use unit rem or em instead of px
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.
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?
GOD!
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.
An alternative to using img tags
is using aspect-ratio
100% :)
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
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
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 :)
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.
😊
Facebook on profile page while scroll goes to bottom how to position changed on can please make a video on it
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.
Is there a reason you used border instead of outline for the aid of visualization? I feel like you have a video that recommends outline instead of border since outline has less impact on layout.
I agree, I would assume outline shows a more accurate version of the box-model as it is inclusive of the width and height and doesn't add to it.
Outline is probable a better choice, but for larger stuff like this, the couple of extra pixels dive have a huge impact, and sometimes outline ends up outside the viewport on the sides, which isn't a huge deal, but not great for a tutorial. For smaller elements where pixels make a difference, it's a no-brainer though
Please read my other comment on "background-images" vs "imgs", and the why.