1 00:00:02,060 --> 00:00:06,220 How can we work on the position of elements? 2 00:00:06,220 --> 00:00:08,900 Well, as you can see attached to this lecture, 3 00:00:08,900 --> 00:00:12,210 you can find another theory project, 4 00:00:12,210 --> 00:00:14,330 which will help us to dive deeper 5 00:00:14,330 --> 00:00:16,570 when it comes to this question, 6 00:00:16,570 --> 00:00:21,130 this project is pretty simple actually, in our body element, 7 00:00:21,130 --> 00:00:23,670 we have three divs, this one right here 8 00:00:23,670 --> 00:00:27,420 with an ID of container, second one and a third one. 9 00:00:27,420 --> 00:00:30,560 The lower divs right here are things you can ignore 10 00:00:30,560 --> 00:00:34,030 I just added these to be able to scroll on our page, 11 00:00:34,030 --> 00:00:36,140 which will become important in a few minutes. 12 00:00:36,140 --> 00:00:38,720 The important div is this first one here 13 00:00:38,720 --> 00:00:41,610 with the ID container, as I said which contains 14 00:00:41,610 --> 00:00:45,100 three paragraphs with the IDs one, two and three 15 00:00:45,100 --> 00:00:48,390 because we will work with these three elements. 16 00:00:48,390 --> 00:00:49,790 From a styles perspective, 17 00:00:49,790 --> 00:00:51,800 things are also pretty straightforward. 18 00:00:51,800 --> 00:00:55,650 We have a general style for the div and for the paragraphs, 19 00:00:55,650 --> 00:00:59,280 and then we have specific styles for the container div. 20 00:00:59,280 --> 00:01:03,040 So which covers these elements here for the paragraphs 21 00:01:03,040 --> 00:01:05,750 inside of this element so the white color for the text 22 00:01:05,750 --> 00:01:07,640 of these three elements and then we have 23 00:01:07,640 --> 00:01:12,170 dedicated colors for each of these single elements. 24 00:01:12,170 --> 00:01:15,300 Now, as you saw in our project, 25 00:01:15,300 --> 00:01:18,890 you would like to bring our hero content, the sparks 26 00:01:18,890 --> 00:01:22,790 so to say down a bit. Now to bring things down 27 00:01:22,790 --> 00:01:27,400 we have multiple options, one way to move elements down 28 00:01:27,400 --> 00:01:32,400 is to change their position in the so-called document flow. 29 00:01:32,650 --> 00:01:37,230 The document flow is the predefined order of elements in 30 00:01:37,230 --> 00:01:40,206 HTML. At the example of block elements 31 00:01:40,206 --> 00:01:42,880 which I will focus too here, is that 32 00:01:42,880 --> 00:01:47,150 we have one block element after another, so one, two, three 33 00:01:47,150 --> 00:01:50,480 no way to change this order. We solve that 34 00:01:50,480 --> 00:01:52,730 we can do this with Flexbox for example, 35 00:01:52,730 --> 00:01:57,410 but generally elements follow this strict document flow. 36 00:01:57,410 --> 00:01:59,900 Now the position of these elements, though, 37 00:01:59,900 --> 00:02:02,783 in this document flow can be changed. And for this, 38 00:02:02,783 --> 00:02:07,783 I want to focus on to this ID number two, right here. 39 00:02:07,860 --> 00:02:11,970 The default position of elements in this document flow is 40 00:02:11,970 --> 00:02:16,900 the position property and the value is static. 41 00:02:16,900 --> 00:02:18,520 With this value being applied, 42 00:02:18,520 --> 00:02:21,510 nothing changes. The elements are where they are, 43 00:02:21,510 --> 00:02:25,520 and you can also add additional properties to work on that 44 00:02:25,520 --> 00:02:27,900 position. Not with aesthetic value though, 45 00:02:27,900 --> 00:02:32,380 but you can do this. For example, the top property here. 46 00:02:32,380 --> 00:02:36,290 The top property helps you to change the distance to the 47 00:02:36,290 --> 00:02:38,220 top. There are different ways. 48 00:02:38,220 --> 00:02:40,100 How does distance is measured? 49 00:02:40,100 --> 00:02:43,430 But generally you could say right here from its current 50 00:02:43,430 --> 00:02:48,250 position, element two should be moved down 20 pixels. 51 00:02:48,250 --> 00:02:50,870 If I save this, nothing is changing. 52 00:02:50,870 --> 00:02:54,280 Element two is still at the same position because position 53 00:02:54,280 --> 00:02:58,120 static is the default behavior and here it cannot be 54 00:02:58,120 --> 00:03:01,780 changed. Things are different if I changed a value 55 00:03:01,780 --> 00:03:04,453 from static to relative here. 56 00:03:05,760 --> 00:03:10,100 With that, the element is moved down now. 57 00:03:10,100 --> 00:03:13,570 Now that's very important, the element is still part 58 00:03:13,570 --> 00:03:15,620 of the so-called document flow. 59 00:03:15,620 --> 00:03:17,500 Although the element was moved down 60 00:03:17,500 --> 00:03:21,260 element one and three are still at the exactly same position 61 00:03:21,260 --> 00:03:25,400 so these elements behave as if element two would still be 62 00:03:25,400 --> 00:03:27,000 where it was at the beginning, 63 00:03:27,000 --> 00:03:30,700 but still element two was pushed down a bit. 64 00:03:30,700 --> 00:03:34,370 You can also move it up either by adding a minus here. 65 00:03:34,370 --> 00:03:39,370 So minus 20 pixels, or by adding the bottom property here, 66 00:03:40,100 --> 00:03:43,080 this will change its initial position starting from the 67 00:03:43,080 --> 00:03:46,810 bottom, so if you save this, you see 68 00:03:46,810 --> 00:03:50,860 it remains where it is because let's comment this out 69 00:03:50,860 --> 00:03:53,630 we said from the bottom, so from here, 70 00:03:53,630 --> 00:03:57,230 your default position in the document flow should move up by 71 00:03:57,230 --> 00:04:00,650 20 pixels. This is also possible for 72 00:04:00,650 --> 00:04:04,480 the left and the right, by the way, 73 00:04:04,480 --> 00:04:07,470 right could be for example, 40 pixels with that, 74 00:04:07,470 --> 00:04:10,910 it would move from the right border here to the left. 75 00:04:10,910 --> 00:04:14,440 So starting here, right distance is 40 pixels 76 00:04:16,000 --> 00:04:19,180 For simplicity reasons I want to focus onto 77 00:04:19,180 --> 00:04:20,970 the top properties here though 78 00:04:20,970 --> 00:04:23,330 so let's add top 20 pixels once again. 79 00:04:23,330 --> 00:04:26,400 To summarize that with position static 80 00:04:26,400 --> 00:04:30,420 we keep elements in the default document flow and we cannot 81 00:04:30,420 --> 00:04:34,120 change the position with top, bottom, left or right. 82 00:04:34,120 --> 00:04:36,410 With position relative, elements are still 83 00:04:36,410 --> 00:04:39,290 part of this document flow as can be seen by the 84 00:04:39,290 --> 00:04:41,930 unchanged position of other elements, 85 00:04:41,930 --> 00:04:46,100 but with top, bottom, left and right we can move elements. 86 00:04:46,100 --> 00:04:49,630 So in our case, moving down our hero content 87 00:04:49,630 --> 00:04:52,803 by a certain amount of pixels will do the trick for example. 88 00:04:54,180 --> 00:04:58,260 And as this was our goal, we will now go back to our project 89 00:04:58,260 --> 00:05:00,940 and apply this concept right here before we then 90 00:05:00,940 --> 00:05:05,473 dive deeper into more position values that we have. 91 00:05:07,440 --> 00:05:11,066 Back in our project, I'm here in our ID select for 92 00:05:11,066 --> 00:05:14,500 the hero content and as our goal is to move 93 00:05:14,500 --> 00:05:18,350 this hero content down a bit, we can now apply 94 00:05:18,350 --> 00:05:21,080 this newly gained knowledge by adding the 95 00:05:21,080 --> 00:05:26,080 position property with a value of relative here, like this. 96 00:05:26,163 --> 00:05:30,400 As you see nothing changed, but now by adding 97 00:05:30,400 --> 00:05:34,300 the top property with a value of 200 pixels 98 00:05:34,300 --> 00:05:37,220 just as an example, if we do that, 99 00:05:37,220 --> 00:05:41,560 you see that we successfully moved down our content here 100 00:05:41,560 --> 00:05:43,933 and it looks a lot better already. 101 00:05:46,030 --> 00:05:49,270 Now, as I said, this is not the only value for the 102 00:05:49,270 --> 00:05:52,380 position property. Before we dive deeper here, though, 103 00:05:52,380 --> 00:05:56,660 in the next lecture, I would like to focus onto some styling 104 00:05:56,660 --> 00:05:59,760 If you already know, I would like to make this content 105 00:05:59,760 --> 00:06:03,063 here, the zero content look a bit more beautiful.