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.