[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.23,Default,,0000,0000,0000,,Now we'll learn how to use CSS
Dialogue: 0,0:00:02.23,0:00:04.23,Default,,0000,0000,0000,,To really move things around.
Dialogue: 0,0:00:04.23,0:00:06.00,Default,,0000,0000,0000,,Not just put them next to each other.
Dialogue: 0,0:00:06.00,0:00:07.64,Default,,0000,0000,0000,,But to actually put things
Dialogue: 0,0:00:07.64,0:00:09.03,Default,,0000,0000,0000,,On top of each other.
Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,Here, we have a webpage
Dialogue: 0,0:00:11.61,0:00:16.04,Default,,0000,0000,0000,,With a few headers, and images, and some
Dialogue: 0,0:00:16.04,0:00:18.07,Default,,0000,0000,0000,,Paragraphs down here
Dialogue: 0,0:00:18.07,0:00:20.16,Default,,0000,0000,0000,,And its currently all laid out with
Dialogue: 0,0:00:20.16,0:00:22.18,Default,,0000,0000,0000,,The default positioning strategy
Dialogue: 0,0:00:22.18,0:00:24.21,Default,,0000,0000,0000,,Which the browser uses
Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,Which we call static or normal positioning
Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,It just means that in line elements
Dialogue: 0,0:00:29.39,0:00:30.70,Default,,0000,0000,0000,,Like images
Dialogue: 0,0:00:30.70,0:00:32.30,Default,,0000,0000,0000,,Are laid from left to right
Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,And block elements
Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,Like headers and paragraphs
Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,Are laid out from top to bottom
Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,We can change that positioning strategy
Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,Using the CSS position property
Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,Let's try it on the landscape image
Dialogue: 0,0:00:45.62,0:00:49.66,Default,,0000,0000,0000,,We'll type position, colon, and then
Dialogue: 0,0:00:49.66,0:00:51.45,Default,,0000,0000,0000,,Relative for the value
Dialogue: 0,0:00:51.45,0:00:53.41,Default,,0000,0000,0000,,The relative position strategy
Dialogue: 0,0:00:53.41,0:00:55.41,Default,,0000,0000,0000,,Means position it how you normally would
Dialogue: 0,0:00:55.41,0:00:57.79,Default,,0000,0000,0000,,But then offset it by some amount
Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,Now, to tell the browser what amount
Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,We want to offset by
Dialogue: 0,0:01:01.50,0:01:03.14,Default,,0000,0000,0000,,We need to use some combination
Dialogue: 0,0:01:03.14,0:01:05.18,Default,,0000,0000,0000,,Of four new CSS properties
Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,Top, bottom, and left, and right
Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,Like let's say we wanna have it be
Dialogue: 0,0:01:09.44,0:01:11.88,Default,,0000,0000,0000,,Twenty pixels down
Dialogue: 0,0:01:11.88,0:01:13.63,Default,,0000,0000,0000,,Say top twenty pixs
Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,And ten pixels over
Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,We'll say left ten pixs
Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,So that's kind of neat,
Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,But not really that neat
Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,I wanna show you something waaay cooler
Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,Absolute positioning
Dialogue: 0,0:01:25.08,0:01:26.58,Default,,0000,0000,0000,,We can use it to take an element
Dialogue: 0,0:01:26.58,0:01:28.52,Default,,0000,0000,0000,,Completely out of the normal flow
Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,And put it anywhere on the screen
Dialogue: 0,0:01:30.61,0:01:31.66,Default,,0000,0000,0000,,To do that
Dialogue: 0,0:01:31.66,0:01:32.94,Default,,0000,0000,0000,,I will change relative
Dialogue: 0,0:01:32.94,0:01:34.04,Default,,0000,0000,0000,,To absolute
Dialogue: 0,0:01:34.04,0:01:35.20,Default,,0000,0000,0000,,On the landscape
Dialogue: 0,0:01:35.20,0:01:36.58,Default,,0000,0000,0000,,And keep the top left
Dialogue: 0,0:01:36.58,0:01:37.78,Default,,0000,0000,0000,,And you can see
Dialogue: 0,0:01:37.78,0:01:39.21,Default,,0000,0000,0000,,That landscape is now
Dialogue: 0,0:01:39.21,0:01:41.70,Default,,0000,0000,0000,,Hiding our images and dance party heading
Dialogue: 0,0:01:41.70,0:01:42.77,Default,,0000,0000,0000,,And now we're going to fix that
Dialogue: 0,0:01:42.77,0:01:44.79,Default,,0000,0000,0000,,Let's start with Winston
Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,So we'll add a rule for Winston
Dialogue: 0,0:01:48.46,0:01:52.10,Default,,0000,0000,0000,,And give Winston a position absolute
Dialogue: 0,0:01:52.10,0:01:54.30,Default,,0000,0000,0000,,And then let me say
Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,Top forty pixs
Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,Oh, let's say top fifty pixs
Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,And then left fifty pixs
Dialogue: 0,0:02:00.06,0:02:02.20,Default,,0000,0000,0000,,Ok, that looks good
Dialogue: 0,0:02:02.20,0:02:04.30,Default,,0000,0000,0000,,And hopper is really eager to get on top
Dialogue: 0,0:02:04.30,0:02:05.62,Default,,0000,0000,0000,,As well
Dialogue: 0,0:02:05.62,0:02:07.30,Default,,0000,0000,0000,,So let's say Hopper also needs
Dialogue: 0,0:02:07.30,0:02:11.66,Default,,0000,0000,0000,,A position absolute
Dialogue: 0,0:02:11.66,0:02:15.22,Default,,0000,0000,0000,,And let's say top thirty pixs
Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,And left sixty pixs
Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,Ok, so my goal is
Dialogue: 0,0:02:19.61,0:02:21.22,Default,,0000,0000,0000,,To make it look like Hopper
Dialogue: 0,0:02:21.22,0:02:23.74,Default,,0000,0000,0000,,Is kind of dancing in front of Winston
Dialogue: 0,0:02:23.74,0:02:26.64,Default,,0000,0000,0000,,But right now it doesn't look that way
Dialogue: 0,0:02:26.64,0:02:28.24,Default,,0000,0000,0000,,Because Winston is being drawn
Dialogue: 0,0:02:28.24,0:02:30.36,Default,,0000,0000,0000,,On top of Hopper
Dialogue: 0,0:02:30.36,0:02:31.95,Default,,0000,0000,0000,,To fix this,
Dialogue: 0,0:02:31.95,0:02:33.62,Default,,0000,0000,0000,,I could either change the order of
Dialogue: 0,0:02:33.62,0:02:35.14,Default,,0000,0000,0000,,The actual image tags
Dialogue: 0,0:02:35.14,0:02:36.68,Default,,0000,0000,0000,,In the html
Dialogue: 0,0:02:36.68,0:02:38.70,Default,,0000,0000,0000,,But a kind of better way is
Dialogue: 0,0:02:38.70,0:02:42.26,Default,,0000,0000,0000,,To use the CSS z index property
Dialogue: 0,0:02:42.26,0:02:43.94,Default,,0000,0000,0000,,We can use that to tell the browser
Dialogue: 0,0:02:43.94,0:02:45.24,Default,,0000,0000,0000,,Exactly what order to draw
Dialogue: 0,0:02:45.24,0:02:46.04,Default,,0000,0000,0000,,Elements in
Dialogue: 0,0:02:46.04,0:02:47.38,Default,,0000,0000,0000,,By giving them differency
Dialogue: 0,0:02:47.38,0:02:48.25,Default,,0000,0000,0000,,Indexes
Dialogue: 0,0:02:48.25,0:02:50.69,Default,,0000,0000,0000,,So I'll start with a landscape
Dialogue: 0,0:02:50.69,0:02:53.27,Default,,0000,0000,0000,,And give it a z index of one
Dialogue: 0,0:02:53.27,0:02:56.34,Default,,0000,0000,0000,,And Winston goes on top with two
Dialogue: 0,0:02:56.34,0:02:59.05,Default,,0000,0000,0000,,Hopper goes on top with three
Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,Alright!
Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,Now Hopper is dancing in front of Winston
Dialogue: 0,0:03:02.64,0:03:04.18,Default,,0000,0000,0000,,Even if he doesn't like that
Dialogue: 0,0:03:04.18,0:03:05.24,Default,,0000,0000,0000,,But he'll have to deal
Dialogue: 0,0:03:05.24,0:03:07.80,Default,,0000,0000,0000,,But now we still have headings
Dialogue: 0,0:03:07.80,0:03:09.99,Default,,0000,0000,0000,,And columns that are hidden
Dialogue: 0,0:03:09.99,0:03:12.45,Default,,0000,0000,0000,,So let's see, let's try
Dialogue: 0,0:03:12.45,0:03:13.94,Default,,0000,0000,0000,,And get the, maybe I want the
Dialogue: 0,0:03:13.94,0:03:16.89,Default,,0000,0000,0000,,Dance party to be on top of everything
Dialogue: 0,0:03:16.89,0:03:19.08,Default,,0000,0000,0000,,So I'm also gonna give that
Dialogue: 0,0:03:19.08,0:03:20.70,Default,,0000,0000,0000,,Position absolute
Dialogue: 0,0:03:20.70,0:03:21.76,Default,,0000,0000,0000,,And z index four
Dialogue: 0,0:03:21.76,0:03:22.100,Default,,0000,0000,0000,,Ok, looks good
Dialogue: 0,0:03:22.100,0:03:24.42,Default,,0000,0000,0000,,Maybe left ten pixs
Dialogue: 0,0:03:24.42,0:03:25.25,Default,,0000,0000,0000,,Just move it over
Dialogue: 0,0:03:25.25,0:03:26.91,Default,,0000,0000,0000,,Maybe, maybe a bit more
Dialogue: 0,0:03:26.91,0:03:28.52,Default,,0000,0000,0000,,Alright, that looks good
Dialogue: 0,0:03:28.52,0:03:29.69,Default,,0000,0000,0000,,Now, for the song lyrics
Dialogue: 0,0:03:29.69,0:03:31.11,Default,,0000,0000,0000,,I actually just want them to
Dialogue: 0,0:03:31.11,0:03:32.82,Default,,0000,0000,0000,,display underneath everything
Dialogue: 0,0:03:32.82,0:03:35.52,Default,,0000,0000,0000,,So for those I'm thinking
Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,Position relative and then
Dialogue: 0,0:03:38.22,0:03:39.47,Default,,0000,0000,0000,,We could just do a top
Dialogue: 0,0:03:39.47,0:03:40.68,Default,,0000,0000,0000,,Which is you know,
Dialogue: 0,0:03:40.68,0:03:42.57,Default,,0000,0000,0000,,Would equal the height of the image
Dialogue: 0,0:03:42.57,0:03:45.12,Default,,0000,0000,0000,,It would be two hundred twenty pixels
Dialogue: 0,0:03:45.12,0:03:48.42,Default,,0000,0000,0000,,Alright, so that is looking really good
Dialogue: 0,0:03:48.42,0:03:50.13,Default,,0000,0000,0000,,We've got a crazy dance party
Dialogue: 0,0:03:50.13,0:03:52.18,Default,,0000,0000,0000,,Going on now
Dialogue: 0,0:03:52.18,0:03:53.82,Default,,0000,0000,0000,,Now, if you pause a talkthrough
Dialogue: 0,0:03:53.82,0:03:55.77,Default,,0000,0000,0000,,And try scrolling the page
Dialogue: 0,0:03:55.77,0:03:58.05,Default,,0000,0000,0000,,You'll see that everything
Dialogue: 0,0:03:58.05,0:03:59.21,Default,,0000,0000,0000,,Scrolls together
Dialogue: 0,0:03:59.21,0:04:00.99,Default,,0000,0000,0000,,And the important thing is
Dialogue: 0,0:04:00.99,0:04:02.62,Default,,0000,0000,0000,,That absolute positioning is relative
Dialogue: 0,0:04:02.62,0:04:04.05,Default,,0000,0000,0000,,To the top of the webpage
Dialogue: 0,0:04:04.05,0:04:06.02,Default,,0000,0000,0000,,So, as you scroll down the webpage
Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,Things that were ten pixels
Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,Top, are going to be moving off screen
Dialogue: 0,0:04:10.55,0:04:11.92,Default,,0000,0000,0000,,Because you are going farther away from
Dialogue: 0,0:04:11.92,0:04:14.64,Default,,0000,0000,0000,,The top of the webpage
Dialogue: 0,0:04:14.64,0:04:15.81,Default,,0000,0000,0000,,Another option is
Dialogue: 0,0:04:15.81,0:04:17.11,Default,,0000,0000,0000,,Fixed positioning
Dialogue: 0,0:04:17.11,0:04:18.76,Default,,0000,0000,0000,,Which will actually make it seem like
Dialogue: 0,0:04:18.76,0:04:20.35,Default,,0000,0000,0000,,Things don't move at all
Dialogue: 0,0:04:20.35,0:04:22.10,Default,,0000,0000,0000,,And, if you want to try that out
Dialogue: 0,0:04:22.10,0:04:23.05,Default,,0000,0000,0000,,We can just change
Dialogue: 0,0:04:23.05,0:04:25.69,Default,,0000,0000,0000,,h1 from absolute to fixed
Dialogue: 0,0:04:25.69,0:04:29.07,Default,,0000,0000,0000,,And now, pause and try scrolling
Dialogue: 0,0:04:29.07,0:04:31.08,Default,,0000,0000,0000,,And you will see that
Dialogue: 0,0:04:31.08,0:04:33.68,Default,,0000,0000,0000,,Dance party just stays in the same place
Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,Because now, it is actaully
Dialogue: 0,0:04:35.67,0:04:39.22,Default,,0000,0000,0000,,Relative to the top of the screen
Dialogue: 0,0:04:39.22,0:04:40.85,Default,,0000,0000,0000,,The window
Dialogue: 0,0:04:40.85,0:04:43.92,Default,,0000,0000,0000,,Ok, so we've managed to use
Dialogue: 0,0:04:43.92,0:04:45.94,Default,,0000,0000,0000,,Three different position properties
Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,To do some pretty cool stuff
Dialogue: 0,0:04:47.70,0:04:48.52,Default,,0000,0000,0000,,When would we
Dialogue: 0,0:04:48.52,0:04:51.07,Default,,0000,0000,0000,,Actually use absolute or fixed positioning
Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,Well, you could use them
Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,To make a game,
Dialogue: 0,0:04:54.18,0:04:55.69,Default,,0000,0000,0000,,Like I did here
Dialogue: 0,0:04:55.69,0:04:57.22,Default,,0000,0000,0000,,Because you'll want to layout all
Dialogue: 0,0:04:57.22,0:04:58.86,Default,,0000,0000,0000,,The parts of the scene in the browser
Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,But you can also use them
Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,For normal webpages
Dialogue: 0,0:05:01.63,0:05:03.03,Default,,0000,0000,0000,,Like on Khan Academy
Dialogue: 0,0:05:03.03,0:05:04.38,Default,,0000,0000,0000,,We use absolute positioning for the models
Dialogue: 0,0:05:04.38,0:05:06.28,Default,,0000,0000,0000,,That pop up in the middle of the page
Dialogue: 0,0:05:06.28,0:05:07.65,Default,,0000,0000,0000,,And use fixed positioning
Dialogue: 0,0:05:07.65,0:05:08.75,Default,,0000,0000,0000,,For the search box on out team page
Dialogue: 0,0:05:08.75,0:05:11.81,Default,,0000,0000,0000,,So that it is always visible as you scroll
Dialogue: 0,0:05:11.81,0:05:14.23,Default,,0000,0000,0000,,You probably won't use positioning
Dialogue: 0,0:05:14.23,0:05:15.43,Default,,0000,0000,0000,,In every webpage
Dialogue: 0,0:05:15.43,0:05:16.70,Default,,0000,0000,0000,,But when you do use it
Dialogue: 0,0:05:16.70,0:05:18.97,Default,,0000,0000,0000,,You'll be really happy that it exists