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. 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 3 00:00:12,880 --> 00:00:13,990 HTML flow. 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 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 6 00:00:29,680 --> 00:00:32,930 to be in the value of 30 pixels. 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. 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 9 00:00:47,350 --> 00:00:48,730 position. 10 00:00:48,760 --> 00:00:52,650 Now our image is nested inside that div, 11 00:00:52,690 --> 00:00:56,120 and I've given it an absolute position. 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. 13 00:01:04,180 --> 00:01:04,480 No. 14 00:01:04,480 --> 00:01:08,800 In fact it's going to shift to the right of the screen. 15 00:01:10,170 --> 00:01:16,050 And this is because with absolute positioning we are positioning the element, 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. 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. 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 19 00:01:43,680 --> 00:01:50,580 relative positioning because we're always specifying a margin that's relative to its parent. 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 21 00:01:57,990 --> 00:02:00,710 the entire body of the web page. 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 23 00:02:07,620 --> 00:02:12,870 to the entire page which looks like you're changing the absolute position of it. 24 00:02:13,050 --> 00:02:15,180 But don't get confused about the naming. 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 26 00:02:23,010 --> 00:02:24,150 should have been, 27 00:02:24,360 --> 00:02:31,070 but absolute position means that you're adding a margin to its parent element. 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. 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 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 31 00:02:53,130 --> 00:02:54,030 lines. 32 00:02:54,030 --> 00:02:59,790 Now if I set the position of my first red square to absolute, 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 34 00:03:13,780 --> 00:03:17,270 it does affect the flow of your HTML. 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 36 00:03:24,620 --> 00:03:28,870 still kept the positions of everything else the same, 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 38 00:03:36,010 --> 00:03:40,510 and it's no longer considered a part of the natural flow of the document. 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 40 00:03:46,960 --> 00:03:51,420 and deleted that div. Basically red is now dead to blue and yellow. 41 00:03:51,520 --> 00:03:54,260 It's like as if they never had a friendship before. 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, 43 00:04:03,280 --> 00:04:05,400 which is the entire body. 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 45 00:04:14,350 --> 00:04:16,950 the right of its parent, which is the body. 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 47 00:04:23,860 --> 00:04:25,620 different this time. 48 00:04:25,640 --> 00:04:27,940 Now this is what you're aiming for. 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 50 00:04:36,460 --> 00:04:37,700 corner. 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 52 00:04:45,760 --> 00:04:48,350 other exactly on their corners. 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 54 00:04:55,240 --> 00:04:56,220 to do this. 55 00:04:56,230 --> 00:04:58,760 So pause the video and give it a go now. 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 57 00:05:06,740 --> 00:05:12,130 add a position absolute to all of our divs. 58 00:05:12,390 --> 00:05:16,370 Now the yellow is almost exactly where it's meant to be 59 00:05:16,500 --> 00:05:18,110 apart from one slight problem. 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. 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. 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 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 64 00:05:41,460 --> 00:05:42,360 screen. 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 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. 67 00:05:58,470 --> 00:06:02,960 So let's first target the body and set the margin to be zero 68 00:06:03,150 --> 00:06:04,680 around all four sides, 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 70 00:06:11,450 --> 00:06:15,560 to figure out how to get the squares touching corner to corner. 71 00:06:16,160 --> 00:06:18,340 So we've got yellow in the right position. 72 00:06:18,340 --> 00:06:20,260 The next thing is the blue. 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 74 00:06:28,620 --> 00:06:32,240 do is give it a left margin of 100 pixels 75 00:06:34,440 --> 00:06:41,540 and a top margin of 100 pixels, and now blue is touching yellow 76 00:06:41,550 --> 00:06:42,860 corner to corner. 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 78 00:06:54,620 --> 00:07:01,030 200 pixels and we are now pixel perfect with our solution. 79 00:07:01,530 --> 00:07:04,380 And we've created the design that we wanted. 80 00:07:04,800 --> 00:07:06,480 So how did that go? 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 82 00:07:12,690 --> 00:07:16,350 just thinking about it being relative to the body. 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 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 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 86 00:07:40,500 --> 00:07:41,770 they used to be. 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 88 00:07:48,000 --> 00:07:50,840 find yourself using maybe a combination of both, 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 90 00:07:57,420 --> 00:08:00,160 to be before you started positioning one element. 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 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. 93 00:08:13,350 --> 00:08:18,740 It can also be the closest parent that has a relative layer. 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, 95 00:08:27,330 --> 00:08:29,820 so this is called container, 96 00:08:30,210 --> 00:08:33,670 we set it's position to be relative, 97 00:08:33,930 --> 00:08:35,020 and we don't change it. 98 00:08:35,040 --> 00:08:36,320 We're not going to touch it. 99 00:08:36,600 --> 00:08:43,990 But this sets up this container to be a perfect parent for our absolute positioning. 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 101 00:08:56,710 --> 00:08:58,930 of grey. 102 00:08:59,290 --> 00:09:02,500 Now you can see this container. 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 104 00:09:09,220 --> 00:09:15,640 now our red square is a child of that parent container. 105 00:09:15,640 --> 00:09:22,710 And now it's defining its position relative to that grey container square. 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 107 00:09:31,480 --> 00:09:34,710 of 20 pixels from the edge of the body, 108 00:09:34,930 --> 00:09:39,370 but it's now relative to its parent container. 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 110 00:09:46,300 --> 00:09:49,150 defined a vertical position for it, 111 00:09:49,150 --> 00:09:53,230 it's being pushed down by this element with a relative layer. 112 00:09:53,440 --> 00:09:57,720 So we can change this by giving it a top property of zero. 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 114 00:10:04,210 --> 00:10:06,920 do the same for our yellow square as well. 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. 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 117 00:10:23,430 --> 00:10:26,050 we're using completely different code. 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 119 00:10:33,190 --> 00:10:37,800 screen by using a combination of absolute and relative positioning. 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 121 00:10:43,440 --> 00:10:47,370 you that last value which is the fixed position. 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 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. 124 00:11:06,180 --> 00:11:07,520 Now I can show you this. 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 126 00:11:16,470 --> 00:11:17,690 through our web site. 127 00:11:17,970 --> 00:11:24,350 So I'm just going to copy and paste a whole bunch of these. 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 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, 130 00:11:40,100 --> 00:11:43,810 and it doesn't move despite all my scrolling. 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 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 133 00:11:56,870 --> 00:11:57,830 fixed, 134 00:11:57,830 --> 00:11:59,770 and this is how you would do it. 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 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.