0 1 00:00:00,670 --> 00:00:06,020 Now in the last lesson we looked at how we can give our elements a relative position. 1 2 00:00:06,040 --> 00:00:12,820 So that's a position that's relative to where the element would have been had we followed the natural 2 3 00:00:12,880 --> 00:00:13,990 HTML flow. 3 4 00:00:14,170 --> 00:00:22,810 So for example in this case by making the image 30 pixels from the right relative to its previous position 4 5 00:00:23,290 --> 00:00:29,680 then we're basically saying that there should be a right margin between the image and where it used 5 6 00:00:29,680 --> 00:00:32,930 to be in the value of 30 pixels. 6 7 00:00:32,950 --> 00:00:38,920 Now I want to talk about a different way of positioning which is using the absolute position. 7 8 00:00:38,920 --> 00: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 9 00:00:47,350 --> 00:00:48,730 position. 9 10 00:00:48,760 --> 00:00:52,650 Now our image is nested inside that div, 10 11 00:00:52,690 --> 00:00:56,120 and I've given it an absolute position. 11 12 00:00:56,140 --> 00: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 13 00:01:04,180 --> 00:01:04,480 No. 13 14 00:01:04,480 --> 00:01:08,800 In fact it's going to shift to the right of the screen. 14 15 00:01:10,170 --> 00:01:16,050 And this is because with absolute positioning we are positioning the element, 15 16 00:01:16,050 --> 00: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 17 00:01:26,370 --> 00:01:36,600 So we now have added a right margin of 30 pixels between the image element and the parent div. 17 18 00:01:36,600 --> 00:01:43,680 Now admittedly the naming is a little bit confusing as I would have probably called absolute positioning 18 19 00:01:43,680 --> 00:01:50,580 relative positioning because we're always specifying a margin that's relative to its parent. 19 20 00:01:50,700 --> 00:01:57,990 But I think the reason why they called it absolute position is because in most cases the parent is simply 20 21 00:01:57,990 --> 00:02:00,710 the entire body of the web page. 21 22 00:02:00,780 --> 00:02:07,620 So the position when you're using absolute positioning looks like you're giving it a margin relative 22 23 00:02:07,620 --> 00:02:12,870 to the entire page which looks like you're changing the absolute position of it. 23 24 00:02:13,050 --> 00:02:15,180 But don't get confused about the naming. 24 25 00:02:15,180 --> 00:02:23,010 Just remember that relative positioning means that you're adding a margin relative to where the element 25 26 00:02:23,010 --> 00:02:24,150 should have been, 26 27 00:02:24,360 --> 00:02:31,070 but absolute position means that you're adding a margin to its parent element. 27 28 00:02:31,080 --> 00:02:38,730 So in this case we've still got our three divs inside a parent element that's the body element. 28 29 00:02:38,730 --> 00: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 30 00:02:47,050 --> 00:02:53,130 are stacked vertically on top of each other, which are all block elements, so they are resting on different 30 31 00:02:53,130 --> 00:02:54,030 lines. 31 32 00:02:54,030 --> 00:02:59,790 Now if I set the position of my first red square to absolute, 32 33 00:03:02,710 --> 00: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 34 00:03:13,780 --> 00:03:17,270 it does affect the flow of your HTML. 34 35 00:03:17,560 --> 00:03:24,620 So unlike when we use relative positioning where we left behind some sort of ghost element where it 35 36 00:03:24,620 --> 00:03:28,870 still kept the positions of everything else the same, 36 37 00:03:28,900 --> 00:03:35,650 but when you're using absolute positioning, you're actually taking the element out of the flow of the document 37 38 00:03:36,010 --> 00:03:40,510 and it's no longer considered a part of the natural flow of the document. 38 39 00:03:40,540 --> 00: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 40 00:03:46,960 --> 00:03:51,420 and deleted that div. Basically red is now dead to blue and yellow. 40 41 00:03:51,520 --> 00:03:54,260 It's like as if they never had a friendship before. 41 42 00:03:54,400 --> 00:04:03,160 But the cool thing is that I can now move this red square anywhere on screen relative to its parent, 42 43 00:04:03,280 --> 00:04:05,400 which is the entire body. 43 44 00:04:05,410 --> 00: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 45 00:04:14,350 --> 00:04:16,950 the right of its parent, which is the body. 45 46 00:04:17,080 --> 00: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 47 00:04:23,860 --> 00:04:25,620 different this time. 47 48 00:04:25,640 --> 00:04:27,940 Now this is what you're aiming for. 48 49 00:04:27,970 --> 00:04:36,460 You're aiming for three squares, still 100 pixels by 100 pixels, that are touching each other corner to 49 50 00:04:36,460 --> 00:04:37,700 corner. 50 51 00:04:37,930 --> 00: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 52 00:04:45,760 --> 00:04:48,350 other exactly on their corners. 52 53 00:04:48,370 --> 00: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 54 00:04:55,240 --> 00:04:56,220 to do this. 54 55 00:04:56,230 --> 00:04:58,760 So pause the video and give it a go now. 55 56 00:05:01,250 --> 00: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 57 00:05:06,740 --> 00:05:12,130 add a position absolute to all of our divs. 57 58 00:05:12,390 --> 00:05:16,370 Now the yellow is almost exactly where it's meant to be 58 59 00:05:16,500 --> 00:05:18,110 apart from one slight problem. 59 60 00:05:18,270 --> 00:05:23,590 And this was a bit of a trick question in there to see if you remembered what we did before. 60 61 00:05:23,820 --> 00:05:28,890 You can see that we're trying to get the yellow to touch with the left and the top edge. 61 62 00:05:28,890 --> 00: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 63 00:05:35,040 --> 00:05:41,460 carefully you can see that there's definitely a margin there between the yellow and the edge of the 63 64 00:05:41,460 --> 00:05:42,360 screen. 64 65 00:05:42,870 --> 00:05:50,130 And the reason for that is because, remember, everything is nested inside our HTML body, and our 65 66 00:05:50,130 --> 00: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 67 00:05:58,470 --> 00:06:02,960 So let's first target the body and set the margin to be zero 67 68 00:06:03,150 --> 00:06:04,680 around all four sides, 68 69 00:06:04,710 --> 00: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 70 00:06:11,450 --> 00:06:15,560 to figure out how to get the squares touching corner to corner. 70 71 00:06:16,160 --> 00:06:18,340 So we've got yellow in the right position. 71 72 00:06:18,340 --> 00:06:20,260 The next thing is the blue. 72 73 00:06:20,420 --> 00: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 74 00:06:28,620 --> 00:06:32,240 do is give it a left margin of 100 pixels 74 75 00:06:34,440 --> 00:06:41,540 and a top margin of 100 pixels, and now blue is touching yellow 75 76 00:06:41,550 --> 00:06:42,860 corner to corner. 76 77 00:06:43,290 --> 00: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 78 00:06:54,620 --> 00:07:01,030 200 pixels and we are now pixel perfect with our solution. 78 79 00:07:01,530 --> 00:07:04,380 And we've created the design that we wanted. 79 80 00:07:04,800 --> 00:07:06,480 So how did that go? 80 81 00:07:06,750 --> 00:07:12,690 You would have noticed that it's a lot easier moving things around using absolute positioning when you're 81 82 00:07:12,690 --> 00:07:16,350 just thinking about it being relative to the body. 82 83 00:07:16,710 --> 00:07:24,690 And in this case if you wanted your squares to be touching each other pixel perfect with no space between 83 84 00:07:24,690 --> 00:07:32,130 them then it's very very easy to do because in this case all three elements are positioning themselves 84 85 00:07:32,430 --> 00:07:40,500 relative to the same thing which is the body of the web page and not two different things like where 85 86 00:07:40,500 --> 00:07:41,770 they used to be. 86 87 00:07:41,970 --> 00: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 88 00:07:48,000 --> 00:07:50,840 find yourself using maybe a combination of both, 88 89 00:07:51,030 --> 00:07:57,420 especially when you want to keep the other elements on screen still in the same flow as what it used 89 90 00:07:57,420 --> 00:08:00,160 to be before you started positioning one element. 90 91 00:08:00,180 --> 00:08:06,520 So they're both really really useful and you'll see both of them really commonly across web site 91 92 00:08:06,570 --> 00:08:13,350 CSS. Now one thing to remember is that the parent doesn't always have to be the body. 92 93 00:08:13,350 --> 00:08:18,740 It can also be the closest parent that has a relative layer. 93 94 00:08:18,750 --> 00:08:27,280 So for example if we put another div around our red square and we set it's position, 94 95 00:08:27,330 --> 00:08:29,820 so this is called container, 95 96 00:08:30,210 --> 00:08:33,670 we set it's position to be relative, 96 97 00:08:33,930 --> 00:08:35,020 and we don't change it. 97 98 00:08:35,040 --> 00:08:36,320 We're not going to touch it. 98 99 00:08:36,600 --> 00:08:43,990 But this sets up this container to be a perfect parent for our absolute positioning. 99 100 00:08:44,310 --> 00: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 101 00:08:56,710 --> 00:08:58,930 of grey. 101 102 00:08:59,290 --> 00:09:02,500 Now you can see this container. 102 103 00:09:02,770 --> 00:09:09,220 Now you'll notice that the design for our web page has now changed and quite dramatically so because 103 104 00:09:09,220 --> 00:09:15,640 now our red square is a child of that parent container. 104 105 00:09:15,640 --> 00:09:22,710 And now it's defining its position relative to that grey container square. 105 106 00:09:22,720 --> 00: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 107 00:09:31,480 --> 00:09:34,710 of 20 pixels from the edge of the body, 107 108 00:09:34,930 --> 00:09:39,370 but it's now relative to its parent container. 108 109 00:09:39,610 --> 00:09:46,300 And even though our other squares, our blue and yellow, are still relative to the body, because we haven't 109 110 00:09:46,300 --> 00:09:49,150 defined a vertical position for it, 110 111 00:09:49,150 --> 00:09:53,230 it's being pushed down by this element with a relative layer. 111 112 00:09:53,440 --> 00:09:57,720 So we can change this by giving it a top property of zero. 112 113 00:09:58,030 --> 00: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 114 00:10:04,210 --> 00:10:06,920 do the same for our yellow square as well. 114 115 00:10:08,210 --> 00: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 116 00:10:17,460 --> 00: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 117 00:10:23,430 --> 00:10:26,050 we're using completely different code. 117 118 00:10:26,170 --> 00:10:33,190 And the beauty of this is that you can use containers to fine tune the position of your elements on 118 119 00:10:33,190 --> 00:10:37,800 screen by using a combination of absolute and relative positioning. 119 120 00:10:37,800 --> 00: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 121 00:10:43,440 --> 00:10:47,370 you that last value which is the fixed position. 121 122 00:10:47,370 --> 00: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 123 00:10:57,780 --> 00:11:05,400 the top then if I scroll through the web page it will stay in its current position. 123 124 00:11:06,180 --> 00:11:07,520 Now I can show you this. 124 125 00:11:07,530 --> 00: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 126 00:11:16,470 --> 00:11:17,690 through our web site. 126 127 00:11:17,970 --> 00:11:24,350 So I'm just going to copy and paste a whole bunch of these. 127 128 00:11:24,530 --> 00: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 129 00:11:31,820 --> 00:11:39,930 the yellow div stays exactly where it is fixed in its position relative to the body of the web site, 129 130 00:11:40,100 --> 00:11:43,810 and it doesn't move despite all my scrolling. 130 131 00:11:43,850 --> 00: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 132 00:11:51,200 --> 00: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 133 00:11:56,870 --> 00:11:57,830 fixed, 133 134 00:11:57,830 --> 00:11:59,770 and this is how you would do it. 134 135 00:11:59,930 --> 00: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 136 00:12:06,770 --> 00:12:11,560 at how we can further improve our web site by using what we've just learned.