1
00:00:02,350 --> 00:00:07,970
After the first rule comes the second one and this one also starts with an element

2
00:00:08,110 --> 00:00:14,170
but as you can imagine, this is again a special element because this time, we again have a percentage

3
00:00:14,370 --> 00:00:21,320
unit applied but we don't have position fixed but position absolute as a declaration right here.

4
00:00:21,700 --> 00:00:27,120
Now with the different position value, the containing block also changed.

5
00:00:27,130 --> 00:00:29,370
Previously, we had the viewport,

6
00:00:29,380 --> 00:00:34,300
now we have an ancestor and which ancestor is this?

7
00:00:34,340 --> 00:00:36,280
We'll find that out in a few seconds

8
00:00:36,280 --> 00:00:38,690
but the important thing is that the percentage now,

9
00:00:38,710 --> 00:00:47,830
so the percentage unit of our element refers to this ancestor's content plus the padding, that's really important.

10
00:00:47,830 --> 00:00:54,190
So I repeat that, the percentage unit of our element with the position absolute declaration refers to

11
00:00:54,190 --> 00:00:56,770
the ancestor's content plus padding.

12
00:00:56,980 --> 00:01:03,220
So if we again have a percentage unit for the width, for our element, we will take the width of the ancestor's content

13
00:01:03,220 --> 00:01:05,680
and padding as the containing block.

14
00:01:05,680 --> 00:01:09,120
The question now is, which element is now the containing block

15
00:01:09,160 --> 00:01:16,390
because this time as we see it, it's obviously an element and this element simply has one of these position

16
00:01:16,390 --> 00:01:23,290
properties applied. Now to say it in simple words, the containing block for an element with the position absolute

17
00:01:23,530 --> 00:01:29,470
declaration applied is the closest ancestor which is not position static,

18
00:01:29,470 --> 00:01:32,000
that's actually how you can remember that.

19
00:01:32,080 --> 00:01:37,360
Now as we did it for the first rule, let's also have a look at our website and see if we can find an

20
00:01:37,360 --> 00:01:39,820
example for the second rule. For that,

21
00:01:39,820 --> 00:01:48,180
I will now go back to our starting page because if you remember, back in the position module, how we positioned

22
00:01:48,190 --> 00:01:55,510
this slogan right here, then you might remember that this slogan if we select it, has a position property

23
00:01:55,990 --> 00:01:57,590
with a value of absolute,

24
00:01:57,610 --> 00:01:59,190
so exactly what we need

25
00:01:59,620 --> 00:02:03,130
and then if we have a look at the direct parent in this case,

26
00:02:03,160 --> 00:02:12,480
so our section element with the product overview ID, we can see that this element has position relative

27
00:02:12,480 --> 00:02:13,040
applied.

28
00:02:13,170 --> 00:02:16,550
So basically a position property different from static

29
00:02:16,710 --> 00:02:23,550
and by that, exactly what we were looking for. With that if we go back to our code now and this time

30
00:02:23,550 --> 00:02:26,650
we don't need the shared.css file, we need the name.css

31
00:02:26,650 --> 00:02:27,670
file

32
00:02:28,020 --> 00:02:30,400
and in here we have the product overview,

33
00:02:30,450 --> 00:02:31,710
that's the ID selector,

34
00:02:31,710 --> 00:02:38,310
let me show you it again in the index.html file maybe, this index.html file right here because here we have

35
00:02:38,340 --> 00:02:39,350
our section,

36
00:02:39,360 --> 00:02:41,550
so that's the element I'm talking about,

37
00:02:41,550 --> 00:02:47,490
this section has the product review ID and in there, we have our slogan, so child and parent in this

38
00:02:47,490 --> 00:02:48,130
case.

39
00:02:48,340 --> 00:02:53,700
So the parent has this position relative and the child,

40
00:02:53,870 --> 00:02:58,280
our slogan with this ID selector has position absolute.

41
00:02:58,280 --> 00:03:02,090
Now we already applied two percentage values right here,

42
00:03:02,090 --> 00:03:08,270
the funny thing is that we did apply these although we didn't totally understand what the containing block

43
00:03:08,300 --> 00:03:09,090
actually was

44
00:03:09,110 --> 00:03:11,100
but we will find that out now

45
00:03:11,360 --> 00:03:18,530
but before we play around with these values, I would like to add width with a value of 100% because

46
00:03:18,650 --> 00:03:25,460
actually what we should see now is that the width of our slogan right here, which currently only includes

47
00:03:25,460 --> 00:03:32,690
the content should increase after I reload the page, like that. Let's inspect it,

48
00:03:32,700 --> 00:03:39,110
again let's see if we can see indeed that our slogan now apparently increase its width.

49
00:03:39,120 --> 00:03:40,870
We can also see it here in dev tools,

50
00:03:40,890 --> 00:03:47,520
it has the 100% width applied with a value of 912 pixels.

51
00:03:47,530 --> 00:03:49,500
Now it's not totally displayed,

52
00:03:49,530 --> 00:03:51,260
it's partially empty right here,

53
00:03:51,270 --> 00:03:53,590
we'll see why this happens in a few seconds

54
00:03:53,790 --> 00:04:00,600
but if I now have a look at the parent, so at the section ID right here, so at the section element with the product

55
00:04:00,620 --> 00:04:09,280
overview ID, then we can see that this parent also has a width of 912 pixels

56
00:04:09,330 --> 00:04:15,050
and the interesting thing is, if you remember back what we saw on the slide, that this width includes

57
00:04:15,090 --> 00:04:17,760
both, the content and the padding,

58
00:04:17,910 --> 00:04:25,650
we can also see this down here in the dev tools. We have 892 for the content and then we have a padding of

59
00:04:25,650 --> 00:04:29,860
left and right of 10 pixels each, with that 912

60
00:04:29,970 --> 00:04:35,100
and because of that, apparently our rule to remember seems to be correct.

61
00:04:35,310 --> 00:04:38,160
You could also say, well I don't trust you,

62
00:04:38,280 --> 00:04:44,700
can you prove to me that the slogan right here doesn't again refer to the viewport right here because

63
00:04:44,700 --> 00:04:46,940
the nav bar which refers to the viewport

64
00:04:46,950 --> 00:04:50,870
we know that now has a width of 912 pixels.

65
00:04:51,210 --> 00:04:57,300
Well the good thing is I can easily prove this to you by simply changing the width of the containing

66
00:04:57,300 --> 00:04:59,410
block or the element

67
00:04:59,430 --> 00:05:05,660
where I say that it would be the containing block to 50% because if the containing block

68
00:05:05,700 --> 00:05:12,400
now has a width of 50% and the child in there, so our element, a width of 100%,

69
00:05:12,420 --> 00:05:24,030
well then let's see. The slogan has now width of 456 pixels and our containing block has a width of

70
00:05:24,030 --> 00:05:26,110
456 pixels too.

71
00:05:26,280 --> 00:05:29,720
That's again just the width of the content and the border

72
00:05:29,970 --> 00:05:35,240
and because of that, I think we saw that second rule to remember is applied right here.

73
00:05:35,370 --> 00:05:40,130
Now regarding this little gap we have to the left, you can see it right here,

74
00:05:40,350 --> 00:05:44,120
this gap is simply due to our left property applied right here.

75
00:05:44,130 --> 00:05:51,390
If I set this to zero of course, to zero like that and reload the page, you can see that now we have the

76
00:05:51,390 --> 00:05:54,300
same width for our two elements right here.

77
00:05:54,480 --> 00:05:57,670
However I don't want to set this to zero,

78
00:05:58,020 --> 00:06:03,480
I would like to set this to 3% again and the width can actually be deleted,

79
00:06:03,510 --> 00:06:04,590
we don't need it here,

80
00:06:04,830 --> 00:06:13,140
I just wanted to show you how this works. With that, we forgot to increase the width to 100% for

81
00:06:13,140 --> 00:06:20,900
the containing block though, let's change this and with that, we got back the look that we had before.

82
00:06:20,940 --> 00:06:28,500
One thing that I would like to show you though is that we could now of course also say that we don't use

83
00:06:28,500 --> 00:06:36,900
bottom 5% but bottom zero maybe, like that. If I do that, we would stick our slogan to the bottom

84
00:06:36,990 --> 00:06:39,750
as you can see it, here the margin begins

85
00:06:39,750 --> 00:06:43,920
and that's where also the slogan is stuck to the bottom.

86
00:06:43,920 --> 00:06:50,400
If I go back and change bottom to top for example, like that, then we have zero distance to the top, right

87
00:06:50,400 --> 00:06:51,120
here

88
00:06:51,510 --> 00:07:00,950
and if I add top 50% for example, like that, then we would have the slogan positioned exactly in

89
00:07:00,950 --> 00:07:03,390
the middle of the containing block,

90
00:07:03,440 --> 00:07:04,800
we can see it right here.

91
00:07:04,940 --> 00:07:07,050
This is hard to see

92
00:07:07,160 --> 00:07:14,240
but the upper part of the border, not of the border, of the margin, sorry for that, now is the 50%

93
00:07:14,390 --> 00:07:16,040
limit that we defined

94
00:07:16,100 --> 00:07:23,060
and if I turn this around and say bottom 50%, like that, then you will see that the element, I'll

95
00:07:23,060 --> 00:07:25,340
keep my mouse cursor right here,

96
00:07:26,420 --> 00:07:28,950
so right about here is the upper part

97
00:07:29,060 --> 00:07:35,930
and if I now reload the page, you can see that I'm now right here at this part of the image and this simply

98
00:07:35,930 --> 00:07:42,830
now, is as you can see it, the lower part of our slogan about here because with 50% bottom, we

99
00:07:42,830 --> 00:07:50,480
specify the distance between the bottom of our slogan and the bottom of the containing block and with

100
00:07:50,480 --> 00:07:57,120
top, we specify the distance of the top of our slogan and the top of our containing block.

101
00:07:57,440 --> 00:08:00,610
With that, we understood the second rule to remember

102
00:08:00,770 --> 00:08:02,940
and we can change this back to bottom,

103
00:08:02,960 --> 00:08:05,580
I think it was 5% like that,

104
00:08:05,580 --> 00:08:08,110
I think this look better like this,

105
00:08:08,510 --> 00:08:12,280
yes. Now we can continue with the third rule to remember.