1 00:00:02,330 --> 00:00:05,850 So what is this behavior I was referring to? 2 00:00:06,110 --> 00:00:11,690 Well basically, we have the same situation that we had for the third rule. 3 00:00:11,690 --> 00:00:19,490 So we have our element with the position static or position relative declaration and that's important, 4 00:00:19,490 --> 00:00:21,980 we have the height property, that's important, 5 00:00:22,010 --> 00:00:29,540 the height property applied with a percentage unit. This means that the percentage value depends on the 6 00:00:29,570 --> 00:00:35,580 containing block which is the closest ancestor which is a block level element, 7 00:00:35,630 --> 00:00:40,930 so that's a situation we have. In contrast to the starting situation we had right there, 8 00:00:41,060 --> 00:00:48,830 the ancestor now also has to be an element with position static or position relative applied, 9 00:00:49,070 --> 00:00:50,300 that's important. 10 00:00:50,300 --> 00:00:58,280 So with this starting scenario, we can now go back to our website and add some code to see why this 11 00:00:58,280 --> 00:01:00,010 scenario can lead to an, 12 00:01:00,080 --> 00:01:02,870 well at least unexpected behavior. 13 00:01:02,870 --> 00:01:10,690 So back on our customers page, I would like to add a new element, this element will be a so-called backdrop. 14 00:01:10,750 --> 00:01:18,500 The backdrop has the purpose to cover the entire website, so it should be on top of all the other elements 15 00:01:18,500 --> 00:01:23,460 we have because we will soon, in the next module to be more precise, 16 00:01:23,540 --> 00:01:26,980 add a pop-up window you could say which should be on top 17 00:01:26,990 --> 00:01:33,290 once you click a button. Below that pop-up, we want to have this backdrop, this slightly transparent backdrop 18 00:01:33,800 --> 00:01:34,970 and behind that backdrop, 19 00:01:35,000 --> 00:01:37,610 all the rest of the website should be located. 20 00:01:37,910 --> 00:01:41,990 We'll dive deeper into this pop-up and how to create it in the next module 21 00:01:41,990 --> 00:01:48,560 as I said, the important thing for now is that we need to create a new element which has a width of 100% 22 00:01:48,560 --> 00:01:53,340 and a height of 100%. To do that, 23 00:01:53,360 --> 00:01:56,450 we go to our code, specifically to the index.html 24 00:01:56,500 --> 00:01:59,040 file right here in the customers folder 25 00:01:59,270 --> 00:02:04,140 and then we go below our body opening tag right here 26 00:02:04,420 --> 00:02:11,120 and add a div, no content in this div, it only has the class backdrop because that's what it's going to 27 00:02:11,120 --> 00:02:12,110 be. 28 00:02:12,170 --> 00:02:19,310 Don't forget to save that and as we will need this backdrop in all our HTML files, we now have to go 29 00:02:19,310 --> 00:02:20,850 to the shared.css file, 30 00:02:20,870 --> 00:02:29,110 right here. In there, we add this selector, this backdrop selector below our body selector and I'll do this 31 00:02:29,140 --> 00:02:36,780 now, so select the backdrop class and now I will add a position property to this selector. 32 00:02:36,860 --> 00:02:37,930 Why am I doing this? 33 00:02:38,150 --> 00:02:45,680 Well as I said, the as I called it, the unexpected behavior only occurs if our element has positioned static 34 00:02:45,710 --> 00:02:47,380 or relative applied. 35 00:02:47,390 --> 00:02:53,120 Now to be honest, we will create that backdrop in the end with position fixed because that's normally 36 00:02:53,120 --> 00:02:54,140 the way you do it, 37 00:02:54,410 --> 00:03:00,830 so what I'em showing you right here is just a temporary solution, with the goal to show you this behavior 38 00:03:00,830 --> 00:03:04,900 I was talking about but this solution will be changed soon, 39 00:03:04,910 --> 00:03:06,520 just keep that in mind. 40 00:03:06,560 --> 00:03:12,890 Nevertheless, I will now apply position relative because as I said, the backdrop should be on top of the 41 00:03:12,890 --> 00:03:19,190 other elements and position static will not allow us to add a set index which we can do with position 42 00:03:19,190 --> 00:03:20,310 relative, 43 00:03:20,360 --> 00:03:29,580 so let's add a set index of 100 maybe and then we need a width of 100% and also a height 44 00:03:30,350 --> 00:03:32,900 of 100% 45 00:03:32,930 --> 00:03:37,760 because the backdrop should cover the enter a page and then some background color, 46 00:03:38,060 --> 00:03:44,490 maybe rgba let's say 0, 0, 0 and 0.5, 47 00:03:44,510 --> 00:03:47,890 this is basically black with a slight transparency, 48 00:03:47,900 --> 00:03:50,780 so as I said so that you can see the other elements below 49 00:03:50,790 --> 00:03:55,620 but you can see that the focus now is on that pop-up above the backdrop. 50 00:03:56,060 --> 00:04:03,710 And with that if we save that and go back to the page and reload it, we cannot see a thing right here 51 00:04:04,430 --> 00:04:07,390 and that's probably unexpected. 52 00:04:07,700 --> 00:04:10,670 Now let's inspect that and see what happened. 53 00:04:10,760 --> 00:04:16,130 We can see that we have our backdrop right here below our body element, 54 00:04:16,130 --> 00:04:17,510 so this is working 55 00:04:18,170 --> 00:04:25,070 and as we applied position relative, the containing block should be the closest ancestor which is 56 00:04:25,130 --> 00:04:30,730 a block level element and undoubtably, our body element is a block level element, 57 00:04:30,830 --> 00:04:32,600 so this should be the ancestor. 58 00:04:32,630 --> 00:04:42,510 Now this body element has a width of almost 940 pixels and a height of 993 pixels, 59 00:04:42,770 --> 00:04:45,100 let's see what happened to our backdrop right here. 60 00:04:45,380 --> 00:04:53,170 Well as we can see, the width was overtaken from the containing block, this worked fine with the 100% 61 00:04:53,480 --> 00:04:57,530 but the height was not overtaken and that's the interesting thing, right? 62 00:04:57,560 --> 00:05:05,400 Apparently we were able to get the width but not the height. Now what caused this issue? 63 00:05:05,470 --> 00:05:10,220 If we inspect that, we can see that the height is not defined right here 64 00:05:10,420 --> 00:05:15,420 and while for the width this is not a big problem because it can use the value it finds right here, for 65 00:05:15,600 --> 00:05:16,280 the height 66 00:05:16,330 --> 00:05:23,020 this doesn't work because the height is only defined by the content of our body right here 67 00:05:23,020 --> 00:05:31,170 but this information does not suffice to make this height 100% declaration work in our case. 68 00:05:31,180 --> 00:05:33,960 Now we have multiple ways to solve this issue 69 00:05:34,000 --> 00:05:37,770 and we'll also dive into another approach throughout this module 70 00:05:38,020 --> 00:05:45,250 but if we want to solve this with percentages only, the following way is one easy workaround to make 71 00:05:45,250 --> 00:05:49,530 sure that we can use this height 100% way. For that, 72 00:05:49,540 --> 00:05:55,630 we have to go back to our shared.css file right here and now add the HTML selector, 73 00:05:55,630 --> 00:06:00,870 this one. Here we add height 100%, like that 74 00:06:01,300 --> 00:06:08,080 and now we also add this height declaration right here to our body element because what will work then 75 00:06:08,080 --> 00:06:16,430 is if we go back and reload the page, we can see that the backdrop is working apparently, it moved down the 76 00:06:16,430 --> 00:06:21,740 other elements below it because it's relatively positioned, so it stays in the document flow 77 00:06:22,010 --> 00:06:25,700 and the backdrop also doesn't cover the elements down here, 78 00:06:25,760 --> 00:06:28,640 we'll dive into the reasons for that in a few seconds 79 00:06:29,000 --> 00:06:35,440 but the interesting thing is that now we added the 100% height to the HTML element right here, 80 00:06:36,460 --> 00:06:38,530 to the body right there 81 00:06:38,750 --> 00:06:45,200 and with this declaration right here, we are now also able to make this height value right here 82 00:06:45,430 --> 00:06:51,310 to 2 which is basically the same one that we have in the body, to make this work. 83 00:06:51,350 --> 00:06:53,360 So this is this quick workaround 84 00:06:53,360 --> 00:06:57,800 I wanted to show you. Regarding the issue we have right now 85 00:06:57,830 --> 00:07:01,560 that basically this element is above the others, 86 00:07:01,880 --> 00:07:08,450 well this can be solved easily of course. What we can do is we can simply go back to our backdrop and 87 00:07:08,450 --> 00:07:12,770 now change the position value from relative to absolute 88 00:07:12,770 --> 00:07:18,170 for example. If we do that, we don't need that trick as I would call it, 89 00:07:18,200 --> 00:07:25,310 so we can get rid of these height declarations right here and if we now reload the page, you can see that the 90 00:07:25,520 --> 00:07:26,910 backdrop is working, 91 00:07:26,930 --> 00:07:28,280 this is fine, 92 00:07:28,280 --> 00:07:29,720 there are two problems though. 93 00:07:29,750 --> 00:07:35,060 The first problem is that if we scroll down, well it still doesn't stick to the viewport 94 00:07:35,060 --> 00:07:38,430 and the second problem is this gap up here. 95 00:07:38,600 --> 00:07:47,840 So regarding this gap up here, this is simply due to margin collapsing because if we go into our main 96 00:07:47,840 --> 00:07:54,170 element, into the div and now open or click onto the testimonial class, we can see that we added 97 00:07:54,200 --> 00:07:58,510 a margin to it, right here a margin top and this margin 98 00:07:58,700 --> 00:08:06,340 and if we unselect this and the other margin, then we can see that the backdrop covers the entire page. 99 00:08:06,380 --> 00:08:13,160 This is a typical case of margin collapsing, a concept Max already explained to you and therefore you 100 00:08:13,160 --> 00:08:19,430 can see what you learn in this course really happens when you create your websites. However, we have 101 00:08:19,430 --> 00:08:22,820 to activate that for the moment because we won't remove that margins 102 00:08:22,880 --> 00:08:30,530 and before we talk about this issue down here, I want to think about the reason why this is working now 103 00:08:30,530 --> 00:08:38,570 actually, because as you saw, I remove these 100% height declarations and nevertheless, the backdrop 104 00:08:38,720 --> 00:08:39,630 generally works, 105 00:08:39,680 --> 00:08:42,140 besides that margin collapsing stuff. 106 00:08:42,400 --> 00:08:48,580 The reason for that is that if we use position absolute for our element, then the conditional block would 107 00:08:48,580 --> 00:08:53,770 be the closest ancestor which has a position property different from static applied. 108 00:08:53,770 --> 00:08:59,980 That's not the case for us because the body in our HTML have the position property applied 109 00:09:00,280 --> 00:09:06,610 and if that's the case, so if you don't have such a position property for the ancestors, then the position 110 00:09:07,000 --> 00:09:11,320 absolute declaration leads to the same behavior as position fixed, 111 00:09:11,320 --> 00:09:17,170 this means the percentage value refers to the viewport as the containing block. 112 00:09:17,170 --> 00:09:19,180 That's a reason why this is working right here. 113 00:09:19,480 --> 00:09:24,610 Nevertheless if we scroll down, we can see that it of course doesn't stick to the viewport, 114 00:09:24,610 --> 00:09:31,000 it just takes the height and width, the percentage value is based on a viewport but it behaves like 115 00:09:31,000 --> 00:09:33,870 a normal absolutely positioned element. 116 00:09:33,910 --> 00:09:40,060 Therefore if we now change position absolute to position fixed right here and reload the page, we can 117 00:09:40,060 --> 00:09:43,410 see that our backdrop is basically working, 118 00:09:43,480 --> 00:09:48,800 we still have this margin collapsing issue though, this issue can be fixed quickly though. 119 00:09:49,150 --> 00:09:57,970 If we now just add top zero and left zero right here as two new properties and now reload our page, 120 00:09:58,450 --> 00:10:03,070 we can see that our backdrop is working perfectly. 121 00:10:03,070 --> 00:10:10,660 And with that, we added this backdrop and in one of the later lectures of this module, I will show you 122 00:10:10,750 --> 00:10:18,460 another unit which also allows us to solve this in an alternative way because we will use the the vh 123 00:10:18,490 --> 00:10:25,240 and vw unit which refers to the viewport, which will basically lead to the same result but with a different 124 00:10:25,240 --> 00:10:26,300 solution 125 00:10:26,650 --> 00:10:30,010 but generally, our viewport is working fine now. 126 00:10:30,040 --> 00:10:36,730 The only problem is that we don't have the viewport on all of our pages because it should also be on 127 00:10:36,730 --> 00:10:38,220 the starting page 128 00:10:38,260 --> 00:10:45,790 and on the packages page and the other issue is that we cannot click around anymore because our backdrop 129 00:10:45,910 --> 00:10:49,880 is now, well basically on top of all the other elements. 130 00:10:49,900 --> 00:10:58,010 So let's first add maybe display none right here to make it disappear 131 00:10:58,020 --> 00:11:01,290 and if we now reload, we can again click onto our website 132 00:11:01,560 --> 00:11:05,290 and now we just have to add the element, so right here, 133 00:11:05,310 --> 00:11:10,660 our div class backdrop to our index.html 134 00:11:10,700 --> 00:11:14,600 file in the packages folder right here, 135 00:11:16,150 --> 00:11:25,030 like that and in the main index.html file, also reload the body right here, like that. 136 00:11:25,030 --> 00:11:32,590 Now let's save all that and with that, we saw how we can fix this strange behavior with height 137 00:11:32,590 --> 00:11:34,260 100% 138 00:11:34,270 --> 00:11:38,440 and we also saw one way, how to quickly add such a backdrop. 139 00:11:38,470 --> 00:11:43,960 It's not the final version yet though because as I said, we will learn how to use a different approach 140 00:11:43,960 --> 00:11:50,620 and of course we also have to add some Javascript because if the only way to make this backdrop appear 141 00:11:50,620 --> 00:11:54,620 and disappear is adding display none or not, well not the best way probably. 142 00:11:55,000 --> 00:11:59,920 But with that, we have a good status now and we can continue in our module.