1 00:00:02,410 --> 00:00:03,746 We're now going to talk 2 00:00:03,746 --> 00:00:06,009 about element positioning. 3 00:00:06,009 --> 00:00:08,506 So far, all our elements were 4 00:00:08,506 --> 00:00:11,247 relative positioned elements. 5 00:00:11,247 --> 00:00:14,462 That means that their position on the Web page 6 00:00:14,462 --> 00:00:17,748 is determined by other elements. 7 00:00:17,748 --> 00:00:21,463 Now, elements with absolute position 8 00:00:21,463 --> 00:00:23,785 can be positioned anywhere we want 9 00:00:23,785 --> 00:00:26,885 inside their parent elements. 10 00:00:26,885 --> 00:00:31,087 But I guess I better show you how it works, right? 11 00:00:31,087 --> 00:00:33,769 Now back to our Web page. 12 00:00:33,769 --> 00:00:36,045 Suppose we wanted to know which date 13 00:00:36,045 --> 00:00:38,808 this article was written. 14 00:00:38,808 --> 00:00:42,391 In order to do that we can position a date, 15 00:00:43,591 --> 00:00:46,258 let's say in this location here, 16 00:00:48,166 --> 00:00:51,666 and the easiest way to do that is probably 17 00:00:52,508 --> 00:00:55,248 with absolute positioning. 18 00:00:55,248 --> 00:00:59,415 But let's first start by create a little paragraph 19 00:01:00,809 --> 00:01:03,392 where we could write that date. 20 00:01:07,310 --> 00:01:11,477 I will write that right after the main heading for now, 21 00:01:14,009 --> 00:01:18,725 but don't worry, we will position it then later. 22 00:01:18,725 --> 00:01:20,975 So, it will be a paragraph, 23 00:01:22,972 --> 00:01:25,389 and I will call it just date. 24 00:01:27,721 --> 00:01:30,388 And let's say, March 11th, 2015. 25 00:01:37,067 --> 00:01:38,817 So, how does it look? 26 00:01:40,027 --> 00:01:43,301 Not quite as we wanted, right? 27 00:01:43,301 --> 00:01:47,468 So, let's format it to put it exactly where we want it. 28 00:01:50,442 --> 00:01:54,447 So, back to the CSS, down here I will add 29 00:01:54,447 --> 00:01:58,114 a date class, as you already know how to do. 30 00:02:00,507 --> 00:02:02,168 Now the first thing we need to do is 31 00:02:02,168 --> 00:02:04,942 to ensure that the parent element is 32 00:02:04,942 --> 00:02:07,442 a relative-positioned element. 33 00:02:09,052 --> 00:02:12,552 In this case, the parent of this p element 34 00:02:14,741 --> 00:02:17,109 is this blog-post div. 35 00:02:17,109 --> 00:02:20,221 So, let's edit it and say that it's 36 00:02:20,221 --> 00:02:21,971 position is relative. 37 00:02:25,190 --> 00:02:28,940 All right, now we can format this class here. 38 00:02:33,886 --> 00:02:37,803 So, date as position absolute and not relative. 39 00:02:40,910 --> 00:02:44,486 And now, to put it exactly where we want it, 40 00:02:44,486 --> 00:02:47,824 we just say top zero, which means that it's 41 00:02:47,824 --> 00:02:51,241 right at the top with zero pixels between 42 00:02:52,394 --> 00:02:56,144 the top and the element, and right also zero, 43 00:02:59,418 --> 00:03:01,368 which means that there is no distance 44 00:03:01,368 --> 00:03:02,367 between the right side of the 45 00:03:02,367 --> 00:03:05,117 parent container and the element. 46 00:03:09,948 --> 00:03:14,929 And there it is in a top right corner, just as we said. 47 00:03:14,929 --> 00:03:19,654 Now it's not quite where we want it yet, right? 48 00:03:19,654 --> 00:03:22,835 So, you remember this pairing between 49 00:03:22,835 --> 00:03:26,085 this box and this was 30 pixels, right? 50 00:03:27,816 --> 00:03:31,032 So what we can do is to say that this element 51 00:03:31,032 --> 00:03:34,677 should have 30 pixels to the right side, 52 00:03:34,677 --> 00:03:38,844 which will move it all the way to this place here. 53 00:03:39,995 --> 00:03:42,131 And now it also seems a little bit 54 00:03:42,131 --> 00:03:45,010 too much at the top, so we can say that 55 00:03:45,010 --> 00:03:48,343 there should be a distance of 10 pixels. 56 00:03:49,504 --> 00:03:53,171 So, back in the CSS, the top is now 10 pixel 57 00:03:54,519 --> 00:03:57,102 and right, let's say 30 pixels. 58 00:04:00,324 --> 00:04:01,404 And there it is. 59 00:04:01,404 --> 00:04:03,154 Exactly as we wanted. 60 00:04:05,282 --> 00:04:08,881 All right, so, this is absolute positioning. 61 00:04:08,881 --> 00:04:10,231 It's very easy and very straightforward. 62 00:04:10,231 --> 00:04:13,478 We just have to ensure that the parent element 63 00:04:13,478 --> 00:04:17,716 is relative and that the absolute element 64 00:04:17,716 --> 00:04:21,049 has a position property set to absolute. 65 00:04:22,511 --> 00:04:24,868 As always, more on that later, 66 00:04:24,868 --> 00:04:27,156 when we will be working on our 67 00:04:27,156 --> 00:04:29,156 big big website project.