Using CSS Position Absolute: some practical examples
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- 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.
CodePen: codepen.io/kev...
---
I have a newsletter! www.kevinpowel...
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
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!
Glad that you're enjoying my content! 😊
I've been struggling all day with the positioning of a responsive video 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 🤘
Kevin, GOAT of css
He is King of CSS.
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! :)
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
It never EVER works for me, it always gives me a tag instead! I've used it in Atom, VS Code and Codepen and I wish it would work SOOO much, haha. I think I had it work once, and I don't know what I did!
Don't know if you just made a typo here, but it's lorEm, not lorUm, maybe that's what's tripping you up.
also it doesn't work when Capitalized, it has to lowercase, sometimes I mess up there =p
type lorem5 and press tab, it should work :-D, I also struggled with it before
@@KevinPowell wow
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!!!
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 :)
This blew my mind. So subtle yet so effective
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.
You are the best!
Damn,, this was clever
Glad you liked it!
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!
Amazing!
I like your work.. But you are pretty hard to follow... Nobody's perfect but i mess that... this shouldn't be here let's move this uknown div elsewhere and i screwed and damn the whole thing... I don't remember exactly the name but was custom card video with great animation... BUT absolutelly not responsive and not finished. Would be super nice to make custom card video responsive using bootstrap cards and two more with css grid and flexbox or detailed tutorial who's showing when to use use bootstrap when to use css grid why and so on. Thanks
Amazing tutorial mate! So useful
Hi Kevin, what haben I to do to get the sourcecode of your videos? Must I make a subscription ?
You videos are so great .
Awesome video, man, like always ! As a total beginner I don't know when or where some code will work or not, like you the 'height' example in this video. There are a lot of tricks related to what will work and what will not depending on 'position' or 'display' or who knows what. I think that explaining "the missing link" (for me at least) would make for a great video.
Or do you already have videos about that ? I haven't seen all of your video, obviously :))
Like, even here, in this video: the 'width' of the parent div is 40% and the 'height' and 'width' of the img are set at 100%,. The img has a 705 width/height, right ? So it's a square. Why did it change its aspect ratio and began looking like a rectangle ?
Because CSS is really strange, lol. I'd love to make a missing link video, but that would most of CSS, lol. It's one of those things that, the more you use it the more you figure out the subtleties of it. As much as possible I try to get into these subtleties in my videos, but there are sooooo many! It can definitely be frustrating as you are learning, but you'll start figuring it out!
@@KevinPowell I was wondering the same issue about the aspect ratio of the image, I guess i'll have to move on and accept that CSS is strange, lmao
18:13 Why not just use a `right` prop? Does the exact same thing without fancy math.
I love seeing your designer mind at work.
Re: the shadow on the left end, would it be feasible to add another element behind that bit, and put the box-shadow on that? That's my Photoshop cheat, so I'm curious how you might pull it off here. It'd really finish off the design.
Really good point. We could add a second shadow onto that ::after element to pull it off :)
- box-shadow: inset 12px 0 10px -10px rgba(0,0,0,.5), 20px 0 40px rgba(0,0,0,.25);
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.
can anyone tell me why we didn't use right in the ::before and top in the ::after?
Topic excellently explained! Now, I am clear about position : absolute. Thank you, KP. 😃
Can you do the same with flex?
Interesting video! Gave me all kinds of things to think about w/ positioning. Keep-up the good work!
Awesome. On 10:25 you say that the border is 1px thick, but isn't it actually 2px thick? (1px left and 1px right)
Hey Kevin, thank you SO much for all of your work; you're singlehandedly teaching me how to be a web developer. I noticed something pretty odd when it comes to the 1px solid white border you've done for the card decoration. I'm using chrome and I noticed that when adjusting the browser window, the 1px border seems to sometimes appear not solid. But when adjusting the window some more, it goes in and out from looking to solid to looking like there's some space within the border, almost like it's two parallel lines. Do you have any idea what is causing that?
Is z-index affected by parent and child positions? Or is it always global to the whole ? I was a little confused by the tweaks you did there.
I am learning so much about CSS that I didn't know before with your videos. I am a full-stack developer and I have never studied CSS specifically. I just have kind of picked it up along the way. And I know enough that a beginner's CSS course would bore me just to fill in my gaps, so your videos are super-helpful for that gap-filling! And for advanced techniques. Thank you!
That is great!thank you very much
Can you explain position absolute and overflow hidden of postionated parent,please.?
I've seen some implemetation of slidders using this one.Thank you!
Hi Kevin, great videos, thanks for everything. About this one, I have a question, how I can "activate" the links? I mean, with your example, if I want to put a link to google.com once the user click the image or text, the link doesn't work :( I was looking everywhere but with out any sucess, could you help me please?
I needed a menu type element and all the pre-made code I found was way too complex (trying to be too many things) so I had to make my own. Absolute position is used in all of the menu controls so they can overlap content they drop down over (like a Select). So that's what got me here: menus.
Thank you so much for all you have done!
So, how would you go about putting a shadow behind the yellow banner sticking out on either side? Maybe put a negative z-index box behind each one with a box-shadow?
Awesome showcase of the absolute position! Thanks for this a real inspiration!
Great content! Thanks
Which things makes Css responsiveness ?
how does the before and after work to create the border
I had to do an AB testing for my work. This video helped me finish it :) thank you so much
I mean the view of the picture, not changing the size. So Ican see the windows of the house for example.
Whats the keyboard hot key to autocomplete image tags and how you define width and height in source ? I tried it but it didn't work
Very cool boss .... Just awesome explanation...👍👍👍
What a design awesome 😍
but when i do position absolute on card body instead of position relative then the card body goes to top left of the window....but your card remained there only...pls someone explain
Amazing content and teaching.
Applications are countless I can mention dropdown, ripple, dialogs etc
Thank you K-Pow love your videos, they make my corner of the web nicer, You are a star!
Why is the body tag set to grid? And that the entire body is 100vh?
Just to center the content for the demo :)
i really learnt a lot from this
How card pseudo element 'after' is getting rendered horizontal not vertical like 'before.
Hi Rajender, Kevin put content: " "; that make it empy and then border: 1px solid white. At first you cannot see this border because you neither give them size or starting and finishing position. Defining left:3rem and right:3rem means that you want the border start a 3rem from the left and go to the right until 3rem, than with bottom: 1.5rem it is like giving a margin. So if you want the border vertical you define top and bottom, using only left or right for the horizontal alignment. If you want it horizontal you define left and right, using top or bottom for the vertical alignment. Hope it's clear.
@@Sayuiv thanks for the reply. Its clear now 😌
why does the yellow on the outside on the right look like it's higher?
Eso estuvo atrevido
Very Nice...thanks!
No problem at all!
Thank you Kevin, I love your videos.
Not a problem, I'm glad to hear that you like them :D
Hi Kevin, I am still a bit confused, what is the difference between absolute and fixed when considering positioning? Thanks.
the position fixed is like an absolute, but makes the div "fixed" to where you placed it, and even if you scroll down, the element won't move up. Hope i helped :)
Thank you. Nothing like real world examples to explain this stuff.
Awesome stuff. Thanks a lot.
You made everything so much easy and clear . Thank you very much.
Great video very helpful
That was really cool, never thought of using pseudo elements for cutting through an element. The card looks like it could be a digital boarding pass
Awesome presentation and Thank you
good
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.
Thank you!
Your videos always clear up whatever impossible mess I've created in my code as I stumble through learning web coding. Thanks!
Haha, glad I'm able to help out a little :)
awsome!!!
Hi! Do you know how to move the omg picture a little to the right or top, by the x an y axis?
these are awesome man..thanks a lot
I have face some problem when i use position absolute...In Every Break point the position of the content is moving.. What is the trick to position absolute content responsive in every Device
Other than positioning it relative to the parent, there isn't much else we can do really.
Liked and subbed. Very useful videos. Keep it up 👍
The class name totally depends on user right? or does card__image or card_image or cardImage or anything else makes any difference? I have seen a lot of people user _ in class names!
The class names are 100% your choice, you can use any name you'd like :).
Thank you very much, sir! Your tutorials are awesome and to the point! I wish you the best!
+
Sir do you have your blog or something where i can ask you designing related questions.
Sadly I don't. Could be something that I look into adding in the future though :)
Even you too awesome. Nice teaching, all your tutorials makes me perfect of some topics. Thank you a lot 👍👍
Thanks so much, I'm glad you're enjoying the tuts!
thanks kevin, interesting stuff definitely
Thanks George :D
Dude ! We can do this card in Photoshop in a very easy way .
Killer!!!
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.
I forked your original pen and added a breakpoint. Because your original CSS was so clean, it only took a few lines of code to make this card look great on mobile. Take a look at the modified pen codepen.io/designoneweb/pen/jKZbzW and let me know what you think. Keep up the great videos!
I find it easier to design something more basic as the mobile one, and then add things and make it more complicated for larger screens, instead of stripping stuff away. But yeah, that's a good topic idea, though it does delve into design a lot as well, and making design decisions for different screen sizes.
Sorry I hadn't seen the followup comment, TH-cam had flagged it (because it had a link in it, I'm guessing). Really nice stuff, glad you took the time to do that, it looks great :)
very nice video
Thanks kevin. It's cool
Thanks Kevin, this really clarified some things regarding positioning
Awesome, glad it helped Christine :)
Awesome, thanks again
thank you, awesome ! really good explained!
Thanks a lot, glad you liked it :)
Damn, you're a CSS artist
Thanks 😊
This is so BADASS
amazinggggg!
ever since i started doing Kevin's course on scrimba i just keep wanting to pause the video and look at the code lol
Same! And it's his only Scrimba which makes me sad! The CSS HTML one
@@amyp.575 indeed, I do hope to see him do more courses in the future. I wish he could do all his videos there instead of youtube but unfortunately thats not the way scrimba works....
@@nathancornwell1455 It's not? The only thing I know about Scrimba is that he was on it and the guy who tried to teach HTML was awful but this was after Kevin so I was comparing the two lol How do we talk him into making more?? Lol I can't learn from anyone else and I have tried and tried and tried! He has my future in his hands!! LOL
@@amyp.575 what i mean is how kevin uploads videos weekly on TH-cam..i wish he could do that on scrimba....kevin put out a course on responsive web design with CSS/HTML but he hasn't put more videos up because thats not how scrimba is , he would have to make a whole new course i assume..but i wish he could have like his videos on animations, transforms, etc on scrimba so we could play around with those while we learn but for now we have his youtube videos , codepens, and github.
Not explained properly.
Please explain this properly I can't understand even one word of you
Great tutorial!
Great video...
Nicely done!
Thank You!!!! :)
Love your videos, great job !
Thanks a lot, glad you liked it :)
Da best keep it i love ur content
Thanks :D
Awesome!
Very nice!
Thanks :)
I love u......
Haha, thanks :D
you are awesome man...
Thanks!
Cool example!
Thanks :)