Position

Quick reference

• 00:05 Okay, in this video I wanna talk about position.
• 00:07 And position is pretty important in CSS.
• 00:10 And it could be a little bit confusing.
• 00:11 So, we have four different basic positions.
• 00:14 We have static, relative, fixed and absolute.
• 00:17 And I have just created some divs for each one and I have just named them static,
• 00:21 relative, fixed and absolute.
• 00:22 And, you can see from the CSS, I just added what they are.
• 00:26 So static has a position of static.
• 00:28 Relative has a position of relative.
• 00:29 Fixed has a position of fixed.
• 00:31 And absolute has a position of absolute.
• 00:33 So, with this basic HTML, if we take a look at this, this is what we have.
• 00:37 So this is static, this is relative, and these are the last two.
• 00:40 And you can see they're all jumbled together and and unreadable so
• 00:43 lets just go through here and start out.
• 00:44 Static is default, everything in CSS by default static and
• 00:49 static doesn't do anything in particular.
• 00:51 And I should say before we even get started these things will use
• 00:54 something called top, bottom, left, and right properties.
• 00:57 And that's how we position them by top bottom left or right and
• 01:00 we'll see that in just a second.
• 01:02 So the static is not affected by top bottom left or right properties,
• 01:05 it's just static, it's by default, it doesn't do anything except for
• 01:09 what you would think it would do.
• 01:11 So relative is sort of like static but static is a normal position,
• 01:16 relative is something relative to that normal position.
• 01:21 So it takes that normal position and
• 01:22 it moves it around based on whether you use top, bottom, left, or right.
• 01:26 And we'll see how this is used in just a minute.
• 01:28 Relative is often used with absolute so we'll hold off on that.
• 01:31 Fixed is just the way it sounds, you're fixing this in a specific spot.
• 01:36 So if we come back here to our fixed, and
• 01:39 give this guy a top of 20 and a right of 0, we save this.
• 01:43 Boom, this fixed guy moves all the way over here.
• 01:46 Now, one weird thing about fixed or one neat thing I guess,
• 01:50 is it stays fixed here no matter what.
• 01:52 So if you have a scroll bar on the side of the screen and the page scrolls,
• 01:55 this will still stay here.
• 01:57 So if we come back here to our index page, and we just come down here,
• 02:00 I'm just gonna put in some line breaks.
• 02:02 I'm gonna copy this and I'm just gonna paste in a whole bunch of them so
• 02:05 that we have a scroll bar.
• 02:06 If we hit reload we have this scroll bar.
• 02:08 You can see if we start to scroll here, the rest of the page moves but
• 02:12 this fixed guy stays right where he is.
• 02:14 So that's sort of a weird thing about fixed.
• 02:16 Kinda interesting.
• 02:17 The final thing is absolute.
• 02:19 Absolute is sorta like fixed, it moves around based on its relative thing.
• 02:25 So let's change this around a little bit.
• 02:27 Let's come to our index page, and I'm just gonna take this absolute guy,
• 02:32 I'm gonna copy this, and I'm gonna put it inside of our relative tags.
• 02:38 Okay, so save this, and come back here and hit Reload.
• 02:42 Nothing's changed yet, but if we come up here to our absolute position, and
• 02:47 let's give this a bottom of, I don't know, let's say 20 pixels.
• 02:54 We save this, hit Reload, boom, that now changes.
• 02:58 If we give this a top of 200 pixels,
• 03:02 boom, it moves this down.
• 03:06 It moves it 200 pixels down from here, because we're still inside of this div.
• 03:11 So you can see if we scroll this it moves with everything else.
• 03:14 So positions are a little bit tricky for people to wrap their brains around.
• 03:18 You'll use this as you do more advanced CSS stuff and
• 03:20 once you start to use it a little bit it will start to make more sense.
• 03:24 But for now that's all for this video.

Lesson notes are only available for subscribers.