Using CSS Position Absolute: some practical examples

[@ganeastefan4287]

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!

[@KevinPowell]

Glad that you're enjoying my content! 😊

[@eddykagia4212]

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!!!

[@darshanpandya1087]

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 :)

[@seanpheneger6632]

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

[@KevinPowell]

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!

[@ShotgunChoda]

Don't know if you just made a typo here, but it's lorEm, not lorUm, maybe that's what's tripping you up.

[@barelyviable5004]

also it doesn't work when Capitalized, it has to lowercase, sometimes I mess up there =p

[@wshah5761]

type lorem5 and press tab, it should work :-D, I also struggled with it before

[@aditnetral]

@@KevinPowell wow

[@sage5296]

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!

[@yetanotherusername12]

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

[@KevinPowell]

Haha, glad I'm able to help out a little :)

[@nickbrown6754]

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 🤘

[@Devendrakr63]

He is King of CSS.

[@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.

[@matthewashworth4992]

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

[@Seantf12345]

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

[@sivaganesh4489]

Kevin, GOAT of css

[@nizamuddinshaikh3185]

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

[@whatsaguygottado2669]

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

[@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.

[@Alessandro-nq3tm]

Amazing tutorial mate! So useful

[@westfield90]

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

[@chinmaykumar7975]

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

[@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! :)

[@rofazayn]

Thank you Kevin, I love your videos.

[@KevinPowell]

Not a problem, I'm glad to hear that you like them :D

[@luizmelo8611]

Thank you very much, sir! Your tutorials are awesome and to the point! I wish you the best!

[@esraamohamed5601]

Thank you so much for all you have done!

[@sumitsahu2338]

Amazing content and teaching.

[@miguelbm1989]

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

[@thilakamn575]

Awesome presentation and Thank you

[@ellaamaechi-qk9ol]

i really learnt a lot from this

[@christinejurewicz3057]

Thanks Kevin, this really clarified some things regarding positioning

[@KevinPowell]

Awesome, glad it helped Christine :)

[@GeorgeFlorian12]

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 :))

[@GeorgeFlorian12]

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 ?

[@KevinPowell]

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!

[@davidmarcos3661]

@@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

[@franktielemans6624]

Damn,, this was clever

[@KevinPowell]

Glad you liked it!

[@infosandfacts7536]

Awesome stuff. Thanks a lot.

[@Fliteska]

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

[@mananwebandall1203]

Very cool boss .... Just awesome explanation...👍👍👍

[@zahidhossainarpo5043]

these are awesome man..thanks a lot

[@DuyenPhanLan]

Great content! Thanks

[@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.

[@DavidWyatt]

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!

[@KevinPowell]

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.

[@KevinPowell]

Sorry I hadn't seen the followup comment, KZbin 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 :)

[@georgesmith3022]

thanks kevin, interesting stuff definitely

[@KevinPowell]

Thanks George :D

[@MartinHAndersen]

Awesome, thanks again

[@udarakasun]

Thanks kevin. It's cool

[@nargesbayat277]

That is great!thank you very much

[@nithinmuniraju4482]

Even you too awesome. Nice teaching, all your tutorials makes me perfect of some topics. Thank you a lot 👍👍

[@KevinPowell]

Thanks so much, I'm glad you're enjoying the tuts!

[@monk333]

Nicely done!

[@ElNicopewpew]

Love your videos, great job !

[@KevinPowell]

Thanks a lot, glad you liked it :)

[@CreativeSequence]

Great video very helpful

[@Abhishek-tr4oi]

What a design awesome 😍

[@boyacosweep]

Amazing!

[@Diamonddrake]

Great tutorial!

[@michajankowski3615]

Cool example!

[@KevinPowell]

Thanks :)

[@davidepalombo2141]

Thank you!

[@jaimesastre6393]

thank you, awesome ! really good explained!

[@KevinPowell]

Thanks a lot, glad you liked it :)

[@asdfghilal]

You are the best!

[@ArturBrosig]

Awesome. On 10:25 you say that the border is 1px thick, but isn't it actually 2px thick? (1px left and 1px right)

[@siriusgd4753]

Very nice!

[@KevinPowell]

Thanks :)

[@heidischorlemmer4407]

Hi Kevin, what haben I to do to get the sourcecode of your videos? Must I make a subscription ? You videos are so great .

[@Honza475]

Liked and subbed. Very useful videos. Keep it up 👍

[@AndrejDaiker]

Awesome!

[@anuranjansrivastav9864]

Great video...

[@cindykee3719]

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!

[@joeldcanfield_spinhead]

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.

[@KevinPowell]

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);

[@mrMinstrel]

Very Nice...thanks!

[@KevinPowell]

No problem at all!

[@thedacian123]

Can you explain position absolute and overflow hidden of postionated parent,please.? I've seen some implemetation of slidders using this one.Thank you!

[@boggeshzahim3713]

This is so BADASS

[@mohammedriyazuddin5649]

you are awesome man...

[@KevinPowell]

Thanks!

[@varsharaorane]

very nice video

[@MontyKsycki]

Thank You!!!! :)

[@cannabisanomaly]

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?

[@diegounanue]

Can you do the same with flex?

[@bijintsy]

awsome!!!

[@workingTchr]

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.

[@Rocadamis]

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?

[@alenjose3903]

how does the before and after work to create the border

[@amyp.575]

why does the yellow on the outside on the right look like it's higher?

[@nathancornwell1455]

ever since i started doing Kevin's course on scrimba i just keep wanting to pause the video and look at the code lol

[@amyp.575]

Same! And it's his only Scrimba which makes me sad! The CSS HTML one

[@nathancornwell1455]

@@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....

[@amyp.575]

@@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

[@nathancornwell1455]

@@amyp.575 what i mean is how kevin uploads videos weekly on KZbin..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.

[@joe-un1ky]

Damn, you're a CSS artist

[@KevinPowell]

Thanks 😊

[@mk9834]

amazinggggg!

[@Rebbelde]

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

[@alexanderphilippovich3047]

I mean the view of the picture, not changing the size. So Ican see the windows of the house for example.

[@KashmirTechUniverse2432]

Which things makes Css responsiveness ?

[@pushpakgupta7396]

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

[@alexanderphilippovich3047]

Hi! Do you know how to move the omg picture a little to the right or top, by the x an y axis?

[@joaoribeiro9575]

Hi Kevin, I am still a bit confused, what is the difference between absolute and fixed when considering positioning? Thanks.

[@vladmp5]

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 :)

[@batucka1]

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?

[@LawnCrack]

Killer!!!

[@fjworkshop]

can anyone tell me why we didn't use right in the ::before and top in the ::after?

[@geebee99singh]

Sir do you have your blog or something where i can ask you designing related questions.

[@KevinPowell]

Sadly I don't. Could be something that I look into adding in the future though :)

[@JimKernix]

Why is the body tag set to grid? And that the entire body is 100vh?

[@KevinPowell]

Just to center the content for the demo :)

[@webcodeexplainedYT]

How card pseudo element 'after' is getting rendered horizontal not vertical like 'before.

[@Sayuiv]

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.

[@webcodeexplainedYT]

@@Sayuiv thanks for the reply. Its clear now 😌

[@iancuvlad7368]

Applications are countless I can mention dropdown, ripple, dialogs etc

[@meew7571]

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

[@KevinPowell]

Other than positioning it relative to the parent, there isn't much else we can do really.

[@nave3411]

thanks

[@KevinPowell]

You're welcome :D

[@mann3604]

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!

[@KevinPowell]

The class names are 100% your choice, you can use any name you'd like :).

[@anggamxfx476]

Da best keep it i love ur content

[@KevinPowell]

Thanks :D

[@ozzyfromspace]

Ozzy Explains: why am I watching this? *1 minute in* ... font-family: “Oswald”, sans-serif; @1:00 Say no more 😭😂

[@blokche_dev]

Stylish! :)

[@KevinPowell]

Thanks!

[@laPas2024]

nice

[@KevinPowell]

Glad you liked it :)

[@syediqbalahmed3176]

good

[@DrinkCola]

Dude ! We can do this card in Photoshop in a very easy way .

[@jasonzhang2866]

coool

[@KevinPowell]

Glad you liked it Jason :)

[@justgiz]

18:13 Why not just use a `right` prop? Does the exact same thing without fancy math.