Hi everybody, welcome back.
Today, we're going to be talking about positioning elements in your webpage.
So trying to layout your page and
your coding is probably going to be one of the most time consuming and, potentially,
frustrating things that you're going to do in this entire course.
And that's one one reason why I've left almost this entire week for
us to practice laying things out on your page.
The ideas themselves are very simple and straightforward, but
it's the putting them together, as you add more and
more to your page, where things can get a little bit tricky.
So let's begin talking about the different positioning elements,
or, the different positioning properties, that you can use, okay?
The four position properties are static, relative, absolute, and
fixed, and for the most part they're very different.
How they work together, or how they work, is that each one of these
can also be modified by properties such as top, right, bottom, and left.
So you say what kind of position you want the element to be, and
then you can say, but I want it to be this far from the top or
this high off the bottom, or this far over from the left.
So let's start with static, and the reason we're going to start with static
is because you've already been using it all along.
It's what we call the default value for elements.
If you don't say anything else, it's going to be set to this.
How it works is that the browser is going to place each element
in just the next available position.
You can give it values such as top, bottom, left, and right, but
the browser's going to completely ignore it.
How it's going to work is something like this.
Let me see if I can draw this up here.
Is you've got your screen.
And then it's time to start adding things to your page, and the browser goes, oh,
well this is span so it fits right here.
And the next one's span, so it fits right here.
Oh, she's got something that's block, so I need to go down here.
So as you add, it just starts at the top, and works a ways across, and then down.
But we can go beyond that.
We can change how the browser positions things, and
one of the ways we can do that is to use position relative.
And when I say relative, I mean relative to itself.
Where would it go?
All right, let's scooch it over a little bit.
It's, basically, very similar to the static position, but
now you get to add these offsets.
The new positioning, the new place that we put the element,
it's not going to affect any of its neighbors.
Instead, what it may do is leave holes
where the browser thought it should've been in the first place.
Usually, relatively positioned elements are used as containers or
blocks for other elements.
So let me just show you another quick example here.
Turn this on.
I've got my browser window, and let's say I'm about to put in a span element, and
it's gonna go right there.
Well instead, if you say that the position is relative,
and you give it some sort of number like top ten, instead of placing it right here,
it's actually gonna go underneath where it should be.
So again, we're just adding little numbers to move things from where they
would normally go.
The next position is what we call absolute.
And this one can really confuse people when you first start it,
because the browser, instead of putting it in the next available position, it
ignores all the elements, and really just looks at the main container it was in.
In this case, we're going to show one example with the browser.
The other elements on the page behave as if it doesn't even exist.
And what this can lead to, is that you can end up with one element on top of another.
So, let's try this.
I've got my browser.
Don't have a lot of room, here.
So right here. And let's say I've got a div,
and I've decided that it's absolute, and it should be a 100 down from the top, and
maybe a 100 over.
So it goes right here.
All right, well, if we were doing relative,
the next element would go underneath it.
But if we have two absolute values, the next one that shows up is gonna go,
again, right on top of it.
All right, the final position that I'm gonna talk about is called fixed.
And the fixed position is relative to the browser window.
This is how they're able to create these pages,
where sometimes you get that pop up, and you just can't get it to go away.
You keep scrolling and scrolling, and it's following you.
Well, how they've done that is they've used that fixed position.
That element is not going to move even if the window is scrolled.
Just so you know if you're using some older browser, or you're trying to design
for Internet Explorer 7 or 8, this only works if you're using an HTML5 DOCTYPE.
So again when you think of the fixed position think of pop up boxes
that just won't go away.
Or you might wanna also think of it as something more useful which is when you're
on a page, and you might have that navigation bar that's on the top, and
as you scroll through the page, you don't have to scroll back up to
see the navigation bar, cuz it's always just there.
So let's go ahead and look at an example where I've got some
different elements that use the different position properties.
Okay, I'm about to show you a page where I've gone in, and
I've put a couple elements.
Just two divs, and a couple paragraphs.
And just to start off, I gave them some starter styling, just so
we can distinguish between them.
For our div, I position relative, I gave it a height, a width, and a border.
For the paragraphs, I gave it a border of a different color,
gave it a top and left, and I left it as position static,
because that's the default position it would always be.
So I wanna show you what that's gonna look like over in the browser.
So if you look, you can see I've got two divs, one up here and down here, and
I have my three paragraphs.
One, whoops, sorry.
One, two, three.
The first thing I wanna point out is that this doesn't look exactly the way some of
you may expect it to look, or even exactly the same way some of you might see it if
you load it on your browser.
Instead of putting this paragraph all the way at the top,
it's actually pushed down a little bit.
Same for the B and the C.
The reason that happens is because all the browsers have different default values for
where the paragraph should be positioned.
So, let me scroll over here for a second.
I'm gonna go down.
And you can see that there's this weird code right here that says,
-webkit- margin-before and -webkit-margin-after.
This is an example of some pseudo classes that they used.
So I don't want these different default things to be coming into play.
So I'm gonna go ahead and get rid of them.
After I comment those out and comment that back in, I refresh, and
now we've got our A, B and C.
So again, A, B, and C, are all relative.
You're telling the browser, just put it in the next available space.
So let's see what's going to happen now if I change my element
from relative to static, or sorry, from static to relative.
And you can see that they've moved over, and
the reason they moved over is that I gave it the values of top 100 and left 100.
Go down, push on over.
If I change this to 50.
Oops, 59, that'll work.
You can see doesn't move over quite as much.
So, static just go in the first place you can.
Relative, go in the first place you can, but go ahead,
you can tell it if you want it to move over a little bit in either direction.
The next one that we're going to do is absolute.
Maybe.
There we go, so now I want you to notice something.
That A and that B, they're on top of each other.
Because you said, I want you to be 100 pixels down and
59 pixels off from the side of the container element.
In this case, it's that div.
So this is odd cuz they're right on top of each other, and it's all mixed together.
There are circumstances where you will want things to be on top of each other.
Maybe one of them will be visible, and
one of them will be hidden, and they're gonna change dynamically.
But this is what happens with absolute.
Now, if I scroll, I'm gonna make this screen a little bit smaller, and I scroll,
you can see that the A and the B, they do scroll away.
And, of course, I did this example because I wanted to show you that if I switched
this to fixed now, instead of saying position the element relative
to its parent, saying position this element relative to the entire browser.
So now everything's on top of each other, and if I try to scroll away.
It doesn't work.
It stays right there, okay?
So again, it's static, relative, absolute, and fixed.
And I want you to play with these, and know your options,
before you start laying out your code by hand.
Now, one of the things I showed you is that it's possible for
multiple elements to be placed in the same position or on top of each other.
And there's a way to deal with that if you don't like the ordering that they're
showing up.
And that's called the Z-index.
The Z-index is just, basically, just a number value, it's either positive or
negative, that tells the browser your stacking order.
So if you have something and you're really sure you wanna make sure it's always on
top, you'd go ahead and put something like 100 on it.
If you didn't really care, you'd could give it a negative 100.
And this is the way that people can go ahead, and
position the elements to be a little bit more dynamic later on,
when we add some JavaScript or different things like that.
So the Z-index is something that not a lot of people code with, but
it's really helpful when you're using inspect element,
if there's something below, and you wanna see what it looks like on top.
So let's go ahead and review.
Positioning your element is the key to creating the layouts that you
want to have.
And this is especially important if you're worried about your site looking good on
a small screen, a big screen, etc.
So proper planning is going to make this much easier for
you when it comes time to code up your page.
But really, the most important thing you can do right now is go online, find those
tutorials or different references where they talk about positioning, and play with
it until you're feeling a little bit more comfortable with how each of these work.
Good luck.