After the first rule comes the second one and this one also starts with an element
but as you can imagine, this is again a special element because this time, we again have a percentage
unit applied but we don't have position fixed but position absolute as a declaration right here.
Now with the different position value, the containing block also changed.
Previously, we had the viewport,
now we have an ancestor and which ancestor is this?
We'll find that out in a few seconds
but the important thing is that the percentage now,
so the percentage unit of our element refers to this ancestor's content plus the padding, that's really important.
So I repeat that, the percentage unit of our element with the position absolute declaration refers to
the ancestor's content plus padding.
So if we again have a percentage unit for the width, for our element, we will take the width of the ancestor's content
and padding as the containing block.
The question now is, which element is now the containing block
because this time as we see it, it's obviously an element and this element simply has one of these position
properties applied. Now to say it in simple words, the containing block for an element with the position absolute
declaration applied is the closest ancestor which is not position static,
that's actually how you can remember that.
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
example for the second rule. For that,
I will now go back to our starting page because if you remember, back in the position module, how we positioned
this slogan right here, then you might remember that this slogan if we select it, has a position property
with a value of absolute,
so exactly what we need
and then if we have a look at the direct parent in this case,
so our section element with the product overview ID, we can see that this element has position relative
applied.
So basically a position property different from static
and by that, exactly what we were looking for. With that if we go back to our code now and this time
we don't need the shared.css file, we need the name.css
file
and in here we have the product overview,
that's the ID selector,
let me show you it again in the index.html file maybe, this index.html file right here because here we have
our section,
so that's the element I'm talking about,
this section has the product review ID and in there, we have our slogan, so child and parent in this
case.
So the parent has this position relative and the child,
our slogan with this ID selector has position absolute.
Now we already applied two percentage values right here,
the funny thing is that we did apply these although we didn't totally understand what the containing block
actually was
but we will find that out now
but before we play around with these values, I would like to add width with a value of 100% because
actually what we should see now is that the width of our slogan right here, which currently only includes
the content should increase after I reload the page, like that. Let's inspect it,
again let's see if we can see indeed that our slogan now apparently increase its width.
We can also see it here in dev tools,
it has the 100% width applied with a value of 912 pixels.
Now it's not totally displayed,
it's partially empty right here,
we'll see why this happens in a few seconds
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
overview ID, then we can see that this parent also has a width of 912 pixels
and the interesting thing is, if you remember back what we saw on the slide, that this width includes
both, the content and the padding,
we can also see this down here in the dev tools. We have 892 for the content and then we have a padding of
left and right of 10 pixels each, with that 912
and because of that, apparently our rule to remember seems to be correct.
You could also say, well I don't trust you,
can you prove to me that the slogan right here doesn't again refer to the viewport right here because
the nav bar which refers to the viewport
we know that now has a width of 912 pixels.
Well the good thing is I can easily prove this to you by simply changing the width of the containing
block or the element
where I say that it would be the containing block to 50% because if the containing block
now has a width of 50% and the child in there, so our element, a width of 100%,
well then let's see. The slogan has now width of 456 pixels and our containing block has a width of
456 pixels too.
That's again just the width of the content and the border
and because of that, I think we saw that second rule to remember is applied right here.
Now regarding this little gap we have to the left, you can see it right here,
this gap is simply due to our left property applied right here.
If I set this to zero of course, to zero like that and reload the page, you can see that now we have the
same width for our two elements right here.
However I don't want to set this to zero,
I would like to set this to 3% again and the width can actually be deleted,
we don't need it here,
I just wanted to show you how this works. With that, we forgot to increase the width to 100% for
the containing block though, let's change this and with that, we got back the look that we had before.
One thing that I would like to show you though is that we could now of course also say that we don't use
bottom 5% but bottom zero maybe, like that. If I do that, we would stick our slogan to the bottom
as you can see it, here the margin begins
and that's where also the slogan is stuck to the bottom.
If I go back and change bottom to top for example, like that, then we have zero distance to the top, right
here
and if I add top 50% for example, like that, then we would have the slogan positioned exactly in
the middle of the containing block,
we can see it right here.
This is hard to see
but the upper part of the border, not of the border, of the margin, sorry for that, now is the 50%
limit that we defined
and if I turn this around and say bottom 50%, like that, then you will see that the element, I'll
keep my mouse cursor right here,
so right about here is the upper part
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
now, is as you can see it, the lower part of our slogan about here because with 50% bottom, we
specify the distance between the bottom of our slogan and the bottom of the containing block and with
top, we specify the distance of the top of our slogan and the top of our containing block.
With that, we understood the second rule to remember
and we can change this back to bottom,
I think it was 5% like that,
I think this look better like this,
yes. Now we can continue with the third rule to remember.