Hi everyone, in this video we're going to look at... something called Absolute Positioning... this comments box here, can you see, it's an Auto layout... and it has this avatar inside of it... means I can move it around, comes along for the ride... because normally it does this, you try and put it in an Auto Layout, it goes...
"I need space"... you're like , "No, no, just go over there," and then it pops out... and then it's in again... we're going to fix that with Absolute Positioning in Figma. To get started I've got a circle, going to open a plugin called 'Content Reel'... I used it just a minute ago, so I can use the 'Command Option P'...
'Ctrl Alt P' shortcut to reopen it... and I'm going to go to 'Image', and I'm going to find an avatar... there you go, which one do I want? I don't know... and what ends up happening is, this is fine, the avatar is great... except you'll find that, like a thousand other mockups...
have this exact same woman in it, that's all right. So what I want to do is I want it to be kind of there, on the top, there... we know that I can hold space bar, so I start dragging, hold space bar... I can put it there, it's not part of this gang though... I can make another component wrapper on it, and it's just a bit of a pain... I want it to be part of this, but I don't want it to be in the flow...
so what we're going to do is we are going to put it in the flow... kind of where you want it... and then we're going to use this magic thing here... it's called Absolute Positioning... if you're a Web Designer you'll know the term... if you're not, kind of makes sense, bit of a nerdy web term...
you click on it, you can absolutely position it anywhere you like... I'm going to put mine up here... you can end up accidentally dragging it outside of my comment box... it's not what I want, I'm going to undo that. So there's a couple of things I can do... one is, I don't want it to be clipped...
so I'm going to hit 'Shift Enter' to select the parent, which is my comment box... I'm going to say, do not clip the contents, which is showing me the edge... double click to go inside of this... now so it doesn't pop out who remembers the shortcut so it doesn't leave that... remember, space bar still works, so I can get it here... but the cool thing about it is it's still part of that comment box...
look, comment box, you come along for the ride... I can turn this whole thing into a component and that will remain there. If you in the past have done like some zero height tricks... this is the replacement for that now... if you've never heard of a zero height trick... to try and make things like this work, be thankful.
Couple of things I want to do to tie it up... is I'm going to drag it over here, holding space bar... I want to play around with the padding of this to kind of give it some space... so I'm going to click on this, there we go... and I'm just going to give it some extra padding for the top... to allow room for my avatar...
then I'm going to spend ages trying to line it up, you wait there... we got a Drop Shadow, but I don't like, anyway, we're going to leave it there... that is Absolute Positioning in Figma.