Hi everyone, look what we've got, we've got a button...

in the top corner of our image...

it's over the top, it's overlapping stuff...

it's either magic, or it is absolute positioning...

look, move it around, it's easy, easy-ish...

let me jump in, and show you how to do it.

All right, first up, I'm going to add a button, so 'A' key...

drag it in, I'm going to put it in between those titles...

just because I want to express some of the positioning, what it does...

and it's going to be helpful for that...

so I'm going to give it a '+', I'm going to--

this is stretching too far, this is only because it is...

child of a Flexbox...

if you haven't set up a Flexbox, you don't have to do this bit...

but I'm going to set it to the left...

and now I need to move it up.

Actually, what I'm going to do is do two versions of it...

one using Absolute, and one using Relative...

so I'm going to give it a name, so this is going to be my "Button"...

okay, that already exists, this is going to be my "Button Plus"...

I'm going with two of them so "Button Plus1"...

and I'm going to copy it, and paste it over here...

I grab the whole thing, copied and pasted it...

you, copy, just you, paste, get it in the same position...

now I'm going to give this a different Class...

you've probably done this already...

if you go-- I'm just going to rename it number 2.

You haven't renamed it, you've renamed all of the Classes to number 2...

this first one is now number 2, so we need to undo that...

and say, actually let's duplicate Class...

or you can delete the class and add it again, up to you.

So we've got two separate ones...

this needs to be called 1, this one's called 2...

this particular button, you can use any element...

text, a Div Tag, you can position anything...

let's look at Position, so I'm going to close all this down, open up Position...

default is Static, then we go to Relative...

and then we're going to click, hold, and drag some of these, watch...

oh, look...

it's amazing, hey, going up...

I'll click and drag it to the right, kind of little dragging going on...

here we go, we've got it up in the corner, right up...

like -250, and across, 256...

265, come on, brain...

excellent...

but I left a big hole there, so this is what Relative does...

if you need to it, a hole there, great, I never do...

what I want to do is, say you, are going to be Absolute...

the cousin to Relative...

but watch what happens over here when I turn it to Absolute...

look, kind of closed the gap up...

that's what I want, I want to go up a bit now...

yeah, and over a bit here...

there we go, you're like, "Great"...

let's just use Absolute for everything, and...

it will work, like it's totally working now...

you run into some little problem, so let me explain what might happen...

is that, at the moment, let's look at this first button, this one here...

it's relative to itself, it knows what it used to be in the world, so it can go up...

here, -250, and across, 265...

and this one though...

this one, because the gap's closed...

basically in the matrix, it doesn't know where it used to be.

So what it does is, it says, I'm relative to the...

in this case, the body, what it is, it's actually relative to...

the next parent...

so at the moment the next parent for this guy, my Lower Card Wrapper...

the parent of this one...

is the Card Thumbnail, there's a parent of this as well...

which is my Grid, there's loads of parents going on.

What it does is, this button says, I'm going to look for the...

very next parent, who's set to Relative, we already did that to the side...

but at the moment we got nothing, none of these parents set to Relative...

so it goes all the way back up to the body...

and it works-ish.

The problem with it though is, it is, can you see these giant numbers...

it's like 700 and 800...

it's because it's relative to the body...

and the body starts over here, so it's across eight hundred and...

you know, 844, and down, 724...

and that's fine, as long as you don't change...

the position, so let's say I make this a lot smaller...

let's go 'Size', my 'Minimum Height', going to hold 'Shift', hit down arrow...

getting my button down here...

and hey, it's moving.

That goes relative to himself...

because that position moved, he moved...

this guy, he's relative to the top left hand corner of the body...

and he's still doing exactly what we told him...

he's still 800 across, and 700 down...

doesn't matter what's going on around him...

silly box.

So what we can do is, let's kind of move it where it was...

I hit lots of undos, you wait there...

undo, undo, undo, undo...

there we go...

all we need to do is set one of his parents to Relative...

someone is going to move along with him which is this thing...

or the Card Thumbnail is going to move along, totally...

but used to it, let's use this Card Lower Wrapper...

and we're going to set him to 'Relative', and it's going to break, it's okay...

see button...

button gone.

So that's the Relative, my button, can only click on him over here...

he's still, there he is down here, he's still set to 700 x 800...

so he still remembers that...

but he's now relative to this thing, that bit there...

so he's going across and down, kind of like we did with the body...

do you get the idea, sometimes you might be off screen, you might be like totally...

where is he, you might be totally like, over there, you'll never see him again.

The trick is just to clear these, you, clear...

remember, hold 'Option', or 'Alt', click, click...

he goes back to kind of where he started...

and now, we can drag him across...

and he's relative to that parent...

which in our case is very close, and we move up and down...

let's go to this, let's change it to '100'...

and look, he came up, because he's relative to this, not the body.

So the trick with Absolute is that it will work for a little while...

until you change something, and then it doesn't, so if that happens...

you've just forgotten to say, you are relative to...

something, some sort of parent, some, you might have to wrap it...

in a Div Tag that does nothing else, than be relative...

so grab the parent, make him relative to, nothing else...

so now he is relative to my Card Lower Wrapper...

does that make sense?

One last thing that might catch you out...

it's not at the moment, is...

sometimes Mr. Button here, when you absolute position, and move him around...

he disappears, he goes, just disappears...

I'll fake it at the moment, he does this, you're like...

I can click on him here, in my Navigator, where is he, Text button...

but I can't see him, where is he, is he blank?

He's actually just behind this image...

something called the Z index, so there's my button...

by default, if I clear that out, he's fine...

but sometimes you might be using somebody else's project...

or a template, and they've messed with the Z index, they've said...

image here is going to be a 'Position' of 'Relative'...

and are going to be the Z index of '1'.

Why did I make it relative and not absolute...

because I want him to hold the space...

because if I go Absolute, kind of goes a little bit freaky...

clears out a space and jumps out...

'Relative', get back in your spot, hold your place...

and all-- you know, they're set the Z index to 1...

so I can go to my button, and say, button, you're now going to be 2, I win...

and then the image could go, you wait, this, '3'...

and you can battle it out.

Sometimes, if you get somebody else's one...

some clever designer might go...

or a developer might just go, "I'm just going to turn this to 999999"...

and then you spend the whole time going...

Heading, where is it, where's my Button Heading?

You go 2, 3, you could be there forever...

so you've got to be clever, and put in '999999'...

that gets tricky...

sometimes it jumps too high, stand at 10...

because the poor next person might be trying to type in so many 9s...

it doesn't make all that sense, but do you get the idea?

As long as the Z number is higher...

this one here, I'm just going to clear it up...

as long as it's higher it's fine...

and that's true for anything, if you do find any other part of your project...

there’s something slipping down underneath something, you're like...

yeah, it's the Z index, it's the height...

this needs to be at least one higher than the person that's slipping underneath.

All right, how was that, it's a tricky one, Positioning...

Absolute was on my outline...

and then I was like, "It's too hard," let's get it out of Essentials...

and then, it's back in, and back out...

so like, I feel like, now that we're at part of this course that...

I feel we can handle it a little bit...

and you probably get to the end of this course and go...

you still got to see every single one of these, except for Position...

what intention is this?

It's because it's tricky, and it's meant to be Essentials...

it's the longest Essentials course I've made, but hey...

web design is interesting...

and there's a lot of time to see, so there you go...

Position, Absolute, not that hard, or, your brain melts...

one of those two things happened...

all right, that is it. I will see you in the next video.