WEBVTT 0 00:00.670 --> 00:06.020 Now in the last lesson we looked at how we can give our elements a relative position. 1 00:06.040 --> 00:12.820 So that's a position that's relative to where the element would have been had we followed the natural 2 00:12.880 --> 00:13.990 HTML flow. 3 00:14.170 --> 00:22.810 So for example in this case by making the image 30 pixels from the right relative to its previous position 4 00:23.290 --> 00:29.680 then we're basically saying that there should be a right margin between the image and where it used 5 00:29.680 --> 00:32.930 to be in the value of 30 pixels. 6 00:32.950 --> 00:38.920 Now I want to talk about a different way of positioning which is using the absolute position. 7 00:38.920 --> 00:47.350 So in this case I've got an image that's inside a div. So the div is colored red and it has a relative 8 00:47.350 --> 00:48.730 position. 9 00:48.760 --> 00:52.650 Now our image is nested inside that div, 10 00:52.690 --> 00:56.120 and I've given it an absolute position. 11 00:56.140 --> 01:04.150 Now if I changed the right coordinate property to 30 pixels it's not going to shift left by 30 pixels. 12 01:04.180 --> 01:04.480 No. 13 01:04.480 --> 01:08.800 In fact it's going to shift to the right of the screen. 14 01:10.170 --> 01:16.050 And this is because with absolute positioning we are positioning the element, 15 01:16.050 --> 01:26.350 so in this case the image element, relative to its parent, and in this case its parent is that red div. 16 01:26.370 --> 01:36.600 So we now have added a right margin of 30 pixels between the image element and the parent div. 17 01:36.600 --> 01:43.680 Now admittedly the naming is a little bit confusing as I would have probably called absolute positioning 18 01:43.680 --> 01:50.580 relative positioning because we're always specifying a margin that's relative to its parent. 19 01:50.700 --> 01:57.990 But I think the reason why they called it absolute position is because in most cases the parent is simply 20 01:57.990 --> 02:00.710 the entire body of the web page. 21 02:00.780 --> 02:07.620 So the position when you're using absolute positioning looks like you're giving it a margin relative 22 02:07.620 --> 02:12.870 to the entire page which looks like you're changing the absolute position of it. 23 02:13.050 --> 02:15.180 But don't get confused about the naming. 24 02:15.180 --> 02:23.010 Just remember that relative positioning means that you're adding a margin relative to where the element 25 02:23.010 --> 02:24.150 should have been, 26 02:24.360 --> 02:31.070 but absolute position means that you're adding a margin to its parent element. 27 02:31.080 --> 02:38.730 So in this case we've still got our three divs inside a parent element that's the body element. 28 02:38.730 --> 02:47.020 Now let's get rid of our display and our position for all of our divs so that we now have three squares that 29 02:47.050 --> 02:53.130 are stacked vertically on top of each other, which are all block elements, so they are resting on different 30 02:53.130 --> 02:54.030 lines. 31 02:54.030 --> 02:59.790 Now if I set the position of my first red square to absolute, 32 03:02.710 --> 03:13.330 and I give it a left margin of say 200 pixels the first thing that you notice is that by using absolute positioning 33 03:13.780 --> 03:17.270 it does affect the flow of your HTML. 34 03:17.560 --> 03:24.620 So unlike when we use relative positioning where we left behind some sort of ghost element where it 35 03:24.620 --> 03:28.870 still kept the positions of everything else the same, 36 03:28.900 --> 03:35.650 but when you're using absolute positioning, you're actually taking the element out of the flow of the document 37 03:36.010 --> 03:40.510 and it's no longer considered a part of the natural flow of the document. 38 03:40.540 --> 03:46.930 So that's why the blue square and the yellow square have shifted up, because it's as if I've just gone 39 03:46.960 --> 03:51.420 and deleted that div. Basically red is now dead to blue and yellow. 40 03:51.520 --> 03:54.260 It's like as if they never had a friendship before. 41 03:54.400 --> 04:03.160 But the cool thing is that I can now move this red square anywhere on screen relative to its parent, 42 04:03.280 --> 04:05.400 which is the entire body. 43 04:05.410 --> 04:14.350 So for example I could say right 20 pixels and that will just give it a right margin of 20 pixels from 44 04:14.350 --> 04:16.950 the right of its parent, which is the body. 45 04:17.080 --> 04:23.860 And so as a challenge I want you to complete exactly the same task but it's going to be a little bit 46 04:23.860 --> 04:25.620 different this time. 47 04:25.640 --> 04:27.940 Now this is what you're aiming for. 48 04:27.970 --> 04:36.460 You're aiming for three squares, still 100 pixels by 100 pixels, that are touching each other corner to 49 04:36.460 --> 04:37.700 corner. 50 04:37.930 --> 04:45.760 And this time I want you to make it pixel perfect so they are right up next to each other touching each 51 04:45.760 --> 04:48.350 other exactly on their corners. 52 04:48.370 --> 04:55.240 And it should be yellow, then blue, then red, and you're going to use the absolute position system in order 53 04:55.240 --> 04:56.220 to do this. 54 04:56.230 --> 04:58.760 So pause the video and give it a go now. 55 05:01.250 --> 05:06.740 So in order to achieve the design that we want the first thing that I'm going to do is I'm going to 56 05:06.740 --> 05:12.130 add a position absolute to all of our divs. 57 05:12.390 --> 05:16.370 Now the yellow is almost exactly where it's meant to be 58 05:16.500 --> 05:18.110 apart from one slight problem. 59 05:18.270 --> 05:23.590 And this was a bit of a trick question in there to see if you remembered what we did before. 60 05:23.820 --> 05:28.890 You can see that we're trying to get the yellow to touch with the left and the top edge. 61 05:28.890 --> 05:35.040 Now I appreciate it's a little bit difficult to see because of how bright that yellow is, but if you look 62 05:35.040 --> 05:41.460 carefully you can see that there's definitely a margin there between the yellow and the edge of the 63 05:41.460 --> 05:42.360 screen. 64 05:42.870 --> 05:50.130 And the reason for that is because, remember, everything is nested inside our HTML body, and our 65 05:50.130 --> 05:58.310 browser has default CSS rules for the body, and we have to get rid of those if we want to have no margin. 66 05:58.470 --> 06:02.960 So let's first target the body and set the margin to be zero 67 06:03.150 --> 06:04.680 around all four sides, 68 06:04.710 --> 06:11.450 so that our yellow square can touch the edge, and that makes our Maths a little bit easier when we're trying 69 06:11.450 --> 06:15.560 to figure out how to get the squares touching corner to corner. 70 06:16.160 --> 06:18.340 So we've got yellow in the right position. 71 06:18.340 --> 06:20.260 The next thing is the blue. 72 06:20.420 --> 06:28.620 So if we're positioning the blue square relative to the parent which is the body then all we need to 73 06:28.620 --> 06:32.240 do is give it a left margin of 100 pixels 74 06:34.440 --> 06:41.540 and a top margin of 100 pixels, and now blue is touching yellow 75 06:41.550 --> 06:42.860 corner to corner. 76 06:43.290 --> 06:54.240 And finally we can go to our red, and we can change its top margin to 200 pixels and its left margin to 77 06:54.620 --> 07:01.030 200 pixels and we are now pixel perfect with our solution. 78 07:01.530 --> 07:04.380 And we've created the design that we wanted. 79 07:04.800 --> 07:06.480 So how did that go? 80 07:06.750 --> 07:12.690 You would have noticed that it's a lot easier moving things around using absolute positioning when you're 81 07:12.690 --> 07:16.350 just thinking about it being relative to the body. 82 07:16.710 --> 07:24.690 And in this case if you wanted your squares to be touching each other pixel perfect with no space between 83 07:24.690 --> 07:32.130 them then it's very very easy to do because in this case all three elements are positioning themselves 84 07:32.430 --> 07:40.500 relative to the same thing which is the body of the web page and not two different things like where 85 07:40.500 --> 07:41.770 they used to be. 86 07:41.970 --> 07:48.000 And this is usually a much easier way for people to think about lay out although in most cases you will 87 07:48.000 --> 07:50.840 find yourself using maybe a combination of both, 88 07:51.030 --> 07:57.420 especially when you want to keep the other elements on screen still in the same flow as what it used 89 07:57.420 --> 08:00.160 to be before you started positioning one element. 90 08:00.180 --> 08:06.520 So they're both really really useful and you'll see both of them really commonly across web site 91 08:06.570 --> 08:13.350 CSS. Now one thing to remember is that the parent doesn't always have to be the body. 92 08:13.350 --> 08:18.740 It can also be the closest parent that has a relative layer. 93 08:18.750 --> 08:27.280 So for example if we put another div around our red square and we set it's position, 94 08:27.330 --> 08:29.820 so this is called container, 95 08:30.210 --> 08:33.670 we set it's position to be relative, 96 08:33.930 --> 08:35.020 and we don't change it. 97 08:35.040 --> 08:36.320 We're not going to touch it. 98 08:36.600 --> 08:43.990 But this sets up this container to be a perfect parent for our absolute positioning. 99 08:44.310 --> 08:55.350 So let's give it a width of say 300 pixels, height of 300 pixels, and let's give it a background color 100 08:56.710 --> 08:58.930 of grey. 101 08:59.290 --> 09:02.500 Now you can see this container. 102 09:02.770 --> 09:09.220 Now you'll notice that the design for our web page has now changed and quite dramatically so because 103 09:09.220 --> 09:15.640 now our red square is a child of that parent container. 104 09:15.640 --> 09:22.710 And now it's defining its position relative to that grey container square. 105 09:22.720 --> 09:31.480 So if I delete that left 200 and instead I say right 20 pixels it's no longer having a right margin 106 09:31.480 --> 09:34.710 of 20 pixels from the edge of the body, 107 09:34.930 --> 09:39.370 but it's now relative to its parent container. 108 09:39.610 --> 09:46.300 And even though our other squares, our blue and yellow, are still relative to the body, because we haven't 109 09:46.300 --> 09:49.150 defined a vertical position for it, 110 09:49.150 --> 09:53.230 it's being pushed down by this element with a relative layer. 111 09:53.440 --> 09:57.720 So we can change this by giving it a top property of zero. 112 09:58.030 --> 10:04.210 And when ever you're using zero, you don't actually have to specify a unit like pixels or percent. And let's 113 10:04.210 --> 10:06.920 do the same for our yellow square as well. 114 10:08.210 --> 10:16.930 And let's push our red square over and let's push our red square over so that it is right zero. 115 10:17.460 --> 10:23.190 And you can see that we've got exactly the same layout but this time because red is nested in a container 116 10:23.430 --> 10:26.050 we're using completely different code. 117 10:26.170 --> 10:33.190 And the beauty of this is that you can use containers to fine tune the position of your elements on 118 10:33.190 --> 10:37.800 screen by using a combination of absolute and relative positioning. 119 10:37.800 --> 10:43.440 Now the last thing I want to show you before we finish our section on positioning is, I want to show 120 10:43.440 --> 10:47.370 you that last value which is the fixed position. 121 10:47.370 --> 10:57.780 So for example if I change the yellow's position from absolute to fixed and I say that it is fixed to 122 10:57.780 --> 11:05.400 the top then if I scroll through the web page it will stay in its current position. 123 11:06.180 --> 11:07.520 Now I can show you this. 124 11:07.530 --> 11:16.470 If I create some h1s in here just to give ourselves a bit more space so that we can actually scroll 125 11:16.470 --> 11:17.690 through our web site. 126 11:17.970 --> 11:24.350 So I'm just going to copy and paste a whole bunch of these. 127 11:24.530 --> 11:31.790 So we've now got a whole bunch of h1s, and we can scroll through our web page, and you'll notice that 128 11:31.820 --> 11:39.930 the yellow div stays exactly where it is fixed in its position relative to the body of the web site, 129 11:40.100 --> 11:43.810 and it doesn't move despite all my scrolling. 130 11:43.850 --> 11:51.200 So this is really useful if you have a nav bar that you that you want to be fixed so that it follows 131 11:51.200 --> 11:56.870 the user as they scroll through your web site or sometimes you might have a side bar that you want to stay 132 11:56.870 --> 11:57.830 fixed, 133 11:57.830 --> 11:59.770 and this is how you would do it. 134 11:59.930 --> 12:06.770 So that's all I wanted to cover for the CSS position property. In the next lesson we're going to look 135 12:06.770 --> 12:11.560 at how we can further improve our web site by using what we've just learned.