Hi everyone, in this video I'm going to show you how to Overlay things... so that they stack on top of each other... if you're like, just put them in different layer orders, that is partially true... but not if you want to make them an Auto layout... where we can be nice and reorganize them, there you go... you can play with the stacking order as well, fancy.

To get started I am back on my Page 1, with all the junk... I have made a frame, 'Shift' 2... and I made a box for the comments to go inside... I'm going to bring in some icons that I want to overlap... they are in the Exercise Files, 'Command Shift K', 'Ctrl Shift K'... it's a bit late for shortcuts, Dan, especially those ones...

bring in icons, I'm going to place them all, oh, in the wrong spot... I'm going to use my quick actions, I'm going to go 'Pack Horizontal'... and the easy way is, with them all selected... smart selection now lets you do negative, there you go... but it won't let you change the stacking... and while that's the easy way, that's may be all you need...

let me show you the proper way, the proper way starts here... where all of these guys need to be multiple components... these need to be taken to my Main Components document... or to my Components page, I'm not going to right now... don't judge me, these instances... even though the components can still be negative aligned...

but the trick really happens when we turn them into Auto layout... remember, 'Shift A', and let's give it a name, 'Command R'... "Emoji Responses"... I can now, using Auto layouts, still use that negative... but the nice thing about here is we've got some advanced Auto layout options... and we can now go in the Canvas Stacking now...

they're all the Z index, depending on what you want to call it... I'm going to do, First on top, 'Last on top', depends on what you want. Now to do this properly, how big do these need to be? I'm going to go back to the Main Components, and say 'K' for Scale... and the height there, I'm going to make these all 16... it messes with my Auto layout because it's still using the negative...

you know, that negative setting, which doesn't make sense when it's really big... I put these on my page. Last thing I want to do is add some Drop Shadows... I'm going to probably do it to this... actually, I'm going to tidy it up, make it look nice, but really that's it... the negative spacing works, just with regular old objects...

it works when you make them components, it works when you make them Auto layouts... but once they're Auto layouts you can play around with the stacking... under the Advanced options... what I want to do now is tidy them up, so I'm going to select them all... go down to, oh, this is worth hanging around for, if you're going to jump off... is Effects, I'm going to add a Drop shadow...

and what you'll see is, let's have a look... I've added them over here, can you see, let's move them over to here... can you see what's happened... not a good Drop Shadow... what I want to do is grab all of these guys, go to my 'Effects'... go into the 'Settings', there is an option now in here that says...

'Show behind transparent areas'... I don't like that... I don't like my Drop Shadow, but it works... I want to go, maybe '2' that way, '0' that way... I like to tab through these as I'm kind of changing them... maybe just one that way, there we go...

and when they get kind of negatively applied, look at that... they got of a little Drop Shadow between them, I love that face... all right, that's it, that is how to easily overlap and stack things in Figma.