1 00:00:02,150 --> 00:00:05,110 I'm back in our example project. 2 00:00:05,110 --> 00:00:07,480 You can, again, find it attached to this lecture 3 00:00:07,480 --> 00:00:09,310 in case you missed it previously. 4 00:00:09,310 --> 00:00:13,150 And so far, we sorted with position relative. 5 00:00:13,150 --> 00:00:16,580 We were able to position our hero content 6 00:00:16,580 --> 00:00:17,963 exactly where it should be. 7 00:00:18,910 --> 00:00:23,790 However, now, we have the problem that our background image, 8 00:00:23,790 --> 00:00:26,620 so basically, an element which contains this image. 9 00:00:26,620 --> 00:00:28,230 So it's our diff, 10 00:00:28,230 --> 00:00:31,720 which has the background image property applied in CSS. 11 00:00:31,720 --> 00:00:35,810 Well, this should be behind the header. 12 00:00:35,810 --> 00:00:38,240 Now, the problem is that the header comes first 13 00:00:38,240 --> 00:00:41,170 and afterwards comes our main part with the diff 14 00:00:41,170 --> 00:00:43,220 that contains the background image. 15 00:00:43,220 --> 00:00:47,570 Therefore, we have to change our normal document flow. 16 00:00:47,570 --> 00:00:49,910 We saw that with position relative, well, 17 00:00:49,910 --> 00:00:51,600 we can move elements around. 18 00:00:51,600 --> 00:00:55,683 And if you would add minus 200 pixels here, for example, 19 00:00:56,550 --> 00:00:58,800 then we could move this kind of to the top 20 00:00:58,800 --> 00:01:00,270 and try it like this. 21 00:01:00,270 --> 00:01:02,450 But this would be a trial and error process 22 00:01:02,450 --> 00:01:03,840 and nothing we recommend. 23 00:01:03,840 --> 00:01:06,370 So that's not the way to do this right here. 24 00:01:06,370 --> 00:01:09,610 However, besides position static and position relative, 25 00:01:09,610 --> 00:01:12,530 we also have two other important properties 26 00:01:12,530 --> 00:01:14,330 which might be helpful here. 27 00:01:14,330 --> 00:01:18,090 One property is position absolute. 28 00:01:18,090 --> 00:01:19,770 This one, and before I apply it, 29 00:01:19,770 --> 00:01:22,370 I want to remove this top logic here. 30 00:01:22,370 --> 00:01:27,210 If we do that, we see some very interesting things. 31 00:01:27,210 --> 00:01:30,430 The first thing is that we have element one now, 32 00:01:30,430 --> 00:01:33,790 and element three, which is following element one. 33 00:01:33,790 --> 00:01:38,100 But in element three, at the beginning, we have element two, 34 00:01:38,100 --> 00:01:40,720 but not using the entire width anymore. 35 00:01:40,720 --> 00:01:43,280 But behaving like an inline element, 36 00:01:43,280 --> 00:01:44,920 but that's not the core thing here. 37 00:01:44,920 --> 00:01:47,410 The core thing is that this element 38 00:01:47,410 --> 00:01:50,930 is now taken out of the document flow. 39 00:01:50,930 --> 00:01:51,763 This means, 40 00:01:51,763 --> 00:01:53,910 although it looks like it would be an inline element, 41 00:01:53,910 --> 00:01:58,130 it's actually no longer existing for the other elements. 42 00:01:58,130 --> 00:02:03,130 If we quickly open the dev tools and inspect these elements, 43 00:02:04,370 --> 00:02:07,210 you'll see that element three is not positioned 44 00:02:07,210 --> 00:02:08,600 next to element two. 45 00:02:08,600 --> 00:02:11,160 It still occupies the entire space. 46 00:02:11,160 --> 00:02:12,740 It just ignores element two. 47 00:02:12,740 --> 00:02:15,980 And this is basically positioned, well, above element three, 48 00:02:15,980 --> 00:02:17,700 but for element one and three. 49 00:02:17,700 --> 00:02:19,680 The second one who was positioned absolute 50 00:02:19,680 --> 00:02:21,800 is no longer existing. 51 00:02:21,800 --> 00:02:26,270 This means we took it out of this flow. 52 00:02:26,270 --> 00:02:29,170 And we can now freely position it. 53 00:02:29,170 --> 00:02:32,320 To position it, we can again use our top, bottom, 54 00:02:32,320 --> 00:02:34,520 left, and right properties. 55 00:02:34,520 --> 00:02:38,490 If we get started with top 20 pixels, again, 56 00:02:38,490 --> 00:02:41,640 what do you think where this element will be positioned? 57 00:02:41,640 --> 00:02:46,640 Well, it's positioned where actually? Hard to tell. 58 00:02:46,990 --> 00:02:49,510 Let's add top zero maybe. 59 00:02:49,510 --> 00:02:52,140 So no distance to the top of, well, 60 00:02:52,140 --> 00:02:53,390 we'll see whatever it is. 61 00:02:55,000 --> 00:02:56,450 Now, it's interesting, right? 62 00:02:57,480 --> 00:03:01,390 This element seems to be positioned at the top, well, 63 00:03:01,390 --> 00:03:04,680 of the HTML element or the body element. 64 00:03:04,680 --> 00:03:06,070 We cannot tell it at the moment. 65 00:03:06,070 --> 00:03:10,553 So let's, again, open the developer tools right here. 66 00:03:12,290 --> 00:03:17,290 And let's now in our code add the HTML selector 67 00:03:18,350 --> 00:03:21,563 and add some margin of maybe 50 pixels to it. 68 00:03:23,430 --> 00:03:25,770 So it looks as if the element 69 00:03:25,770 --> 00:03:30,000 is now relative to the HTML element. 70 00:03:30,000 --> 00:03:32,310 Well, things become a bit more difficult 71 00:03:32,310 --> 00:03:37,310 if we now add position relative to our container here. 72 00:03:38,200 --> 00:03:40,290 So to this ID. 73 00:03:40,290 --> 00:03:44,493 Let's do this with position relative. 74 00:03:45,590 --> 00:03:47,910 Then the element suddenly 75 00:03:47,910 --> 00:03:51,760 is relative to this parent element. 76 00:03:51,760 --> 00:03:53,290 Now, what does this mean now? 77 00:03:53,290 --> 00:03:57,920 Well, generally, if you add position absolute to an element, 78 00:03:57,920 --> 00:04:01,470 then it will be taken out of the document flow 79 00:04:01,470 --> 00:04:06,470 and be positioned relative to the first ancestor, 80 00:04:07,030 --> 00:04:10,140 which has position relative applied. 81 00:04:10,140 --> 00:04:12,520 In this case, this would be our container. 82 00:04:12,520 --> 00:04:15,750 If we get rid of that, you'll see it just goes up, 83 00:04:15,750 --> 00:04:19,570 up to the HTML element and behaves relative to this. 84 00:04:19,570 --> 00:04:21,290 There are more exceptions here 85 00:04:21,290 --> 00:04:24,020 and more conditions on which elements should have 86 00:04:24,020 --> 00:04:28,410 which rule applied so that the absolutely positioned element 87 00:04:28,410 --> 00:04:30,300 is related to this element. 88 00:04:30,300 --> 00:04:31,990 But as for Flexbox, 89 00:04:31,990 --> 00:04:35,480 you can find more details about these rules 90 00:04:35,480 --> 00:04:38,130 attached to the last lecture of this module. 91 00:04:38,130 --> 00:04:40,610 For the moment, it's just important to keep in mind 92 00:04:40,610 --> 00:04:44,890 that for our structure here, if we apply position absolute, 93 00:04:44,890 --> 00:04:49,413 we can position this element relative to the HTML element. 94 00:04:50,680 --> 00:04:55,070 And if we would remove the margin from the HTML element, 95 00:04:55,070 --> 00:04:57,840 then this would mean that the element here 96 00:04:57,840 --> 00:05:02,070 is basically relative to the body, which would be exactly 97 00:05:02,070 --> 00:05:05,620 the behavior we need for our navigation bar. 98 00:05:05,620 --> 00:05:09,010 And if I zoom in a bit here and scroll down, 99 00:05:09,010 --> 00:05:12,340 you can see that the element sticks to the top. 100 00:05:12,340 --> 00:05:15,020 So it is positioned relative to the body here, 101 00:05:15,020 --> 00:05:19,080 but by scrolling, the elements stays where it is. 102 00:05:19,080 --> 00:05:21,820 This would be exactly what we need for our project, 103 00:05:21,820 --> 00:05:22,653 but sometimes, 104 00:05:22,653 --> 00:05:25,990 you might want to have a sticky navigation bar. 105 00:05:25,990 --> 00:05:27,880 This can also be achieved easily 106 00:05:27,880 --> 00:05:30,420 with another value for the position property. 107 00:05:30,420 --> 00:05:33,910 And here, the value would be positioned fixed. 108 00:05:33,910 --> 00:05:37,250 With this being applied, nothing changes at first sight, 109 00:05:37,250 --> 00:05:39,080 but if I now scroll down, 110 00:05:39,080 --> 00:05:41,930 you see that the element stays where it is. 111 00:05:41,930 --> 00:05:46,430 So it sticks to the visible area of our page. 112 00:05:46,430 --> 00:05:50,950 This visible area here is the so called viewport. 113 00:05:50,950 --> 00:05:53,510 So the viewport is what you can see right here. 114 00:05:53,510 --> 00:05:54,850 That's very important. 115 00:05:54,850 --> 00:05:57,870 The HTML element and the body we talked about 116 00:05:57,870 --> 00:06:01,460 starts at the top, starts right here as you can see it. 117 00:06:01,460 --> 00:06:02,790 And if I scroll down, 118 00:06:02,790 --> 00:06:06,010 I cannot see the entire HTML element, right? 119 00:06:06,010 --> 00:06:08,920 But I can see this viewport. 120 00:06:08,920 --> 00:06:12,040 So the viewport tells me the current position 121 00:06:12,040 --> 00:06:14,367 of the webpage that I can see. 122 00:06:14,367 --> 00:06:17,020 And I can see parts of the HTML element 123 00:06:17,020 --> 00:06:18,220 or of the body here, 124 00:06:18,220 --> 00:06:22,180 but I cannot see the beginning of the HTML element. 125 00:06:22,180 --> 00:06:24,730 And that was the difference to position absolute. 126 00:06:24,730 --> 00:06:29,140 Position absolute was relative to the HTML element 127 00:06:29,140 --> 00:06:29,973 in our case. 128 00:06:29,973 --> 00:06:33,390 As no ancestor had the position relative rule applied. 129 00:06:33,390 --> 00:06:37,230 Therefore, it was out of sight if we scroll down, 130 00:06:37,230 --> 00:06:40,780 but fixed is relative to the viewport. 131 00:06:40,780 --> 00:06:43,800 So the area that we can see here. 132 00:06:43,800 --> 00:06:46,170 I can also prove this to you if I comment 133 00:06:46,170 --> 00:06:47,713 back in our margin. 134 00:06:48,700 --> 00:06:49,533 Now, you will say, 135 00:06:49,533 --> 00:06:52,147 "Okay, this looks exactly the same we had before. 136 00:06:52,147 --> 00:06:54,000 "It sticks to HTML element." 137 00:06:54,000 --> 00:06:59,000 But if I now, again, add the position property relative 138 00:06:59,360 --> 00:07:01,710 for example to the container, 139 00:07:01,710 --> 00:07:03,680 then this doesn't have an impact. 140 00:07:03,680 --> 00:07:07,450 As you can see the element stays where it is. 141 00:07:07,450 --> 00:07:09,990 However, position fixed is not what we need 142 00:07:09,990 --> 00:07:11,900 for our header here. 143 00:07:11,900 --> 00:07:13,530 Therefore, we can get rid of this 144 00:07:13,530 --> 00:07:15,773 and also of this margin up here. 145 00:07:16,870 --> 00:07:19,690 And change it back to position absolute. 146 00:07:19,690 --> 00:07:21,770 And to quickly recap that now. 147 00:07:21,770 --> 00:07:25,020 With this logic, we will be able to add 148 00:07:25,020 --> 00:07:29,100 our header on top of our background image, 149 00:07:29,100 --> 00:07:31,610 which could be the element one here in our example, 150 00:07:31,610 --> 00:07:33,400 which would hold the background image. 151 00:07:33,400 --> 00:07:37,360 And with that, the header would be on top of our main part. 152 00:07:37,360 --> 00:07:39,870 So exactly what we want here. 153 00:07:39,870 --> 00:07:41,760 The problem here though is that, well, 154 00:07:41,760 --> 00:07:44,800 the way our element is displayed here is not the one 155 00:07:44,800 --> 00:07:47,090 we need for our header and the navigation bar. 156 00:07:47,090 --> 00:07:50,680 It should use the entire space available of the page. 157 00:07:50,680 --> 00:07:53,313 And this is the next thing we'll have a look at.