So what is this behavior I was referring to?
Well basically, we have the same situation that we had for the third rule.
So we have our element with the position static or position relative declaration and that's important,
we have the height property, that's important,
the height property applied with a percentage unit. This means that the percentage value depends on the
containing block which is the closest ancestor which is a block level element,
so that's a situation we have. In contrast to the starting situation we had right there,
the ancestor now also has to be an element with position static or position relative applied,
that's important.
So with this starting scenario, we can now go back to our website and add some code to see why this
scenario can lead to an,
well at least unexpected behavior.
So back on our customers page, I would like to add a new element, this element will be a so-called backdrop.
The backdrop has the purpose to cover the entire website, so it should be on top of all the other elements
we have because we will soon, in the next module to be more precise,
add a pop-up window you could say which should be on top
once you click a button. Below that pop-up, we want to have this backdrop, this slightly transparent backdrop
and behind that backdrop,
all the rest of the website should be located.
We'll dive deeper into this pop-up and how to create it in the next module
as I said, the important thing for now is that we need to create a new element which has a width of 100%
and a height of 100%. To do that,
we go to our code, specifically to the index.html
file right here in the customers folder
and then we go below our body opening tag right here
and add a div, no content in this div, it only has the class backdrop because that's what it's going to
be.
Don't forget to save that and as we will need this backdrop in all our HTML files, we now have to go
to the shared.css file,
right here. In there, we add this selector, this backdrop selector below our body selector and I'll do this
now, so select the backdrop class and now I will add a position property to this selector.
Why am I doing this?
Well as I said, the as I called it, the unexpected behavior only occurs if our element has positioned static
or relative applied.
Now to be honest, we will create that backdrop in the end with position fixed because that's normally
the way you do it,
so what I'em showing you right here is just a temporary solution, with the goal to show you this behavior
I was talking about but this solution will be changed soon,
just keep that in mind.
Nevertheless, I will now apply position relative because as I said, the backdrop should be on top of the
other elements and position static will not allow us to add a set index which we can do with position
relative,
so let's add a set index of 100 maybe and then we need a width of 100% and also a height
of 100%
because the backdrop should cover the enter a page and then some background color,
maybe rgba let's say 0, 0, 0 and 0.5,
this is basically black with a slight transparency,
so as I said so that you can see the other elements below
but you can see that the focus now is on that pop-up above the backdrop.
And with that if we save that and go back to the page and reload it, we cannot see a thing right here
and that's probably unexpected.
Now let's inspect that and see what happened.
We can see that we have our backdrop right here below our body element,
so this is working
and as we applied position relative, the containing block should be the closest ancestor which is
a block level element and undoubtably, our body element is a block level element,
so this should be the ancestor.
Now this body element has a width of almost 940 pixels and a height of 993 pixels,
let's see what happened to our backdrop right here.
Well as we can see, the width was overtaken from the containing block, this worked fine with the 100%
but the height was not overtaken and that's the interesting thing, right?
Apparently we were able to get the width but not the height. Now what caused this issue?
If we inspect that, we can see that the height is not defined right here
and while for the width this is not a big problem because it can use the value it finds right here, for
the height
this doesn't work because the height is only defined by the content of our body right here
but this information does not suffice to make this height 100% declaration work in our case.
Now we have multiple ways to solve this issue
and we'll also dive into another approach throughout this module
but if we want to solve this with percentages only, the following way is one easy workaround to make
sure that we can use this height 100% way. For that,
we have to go back to our shared.css file right here and now add the HTML selector,
this one. Here we add height 100%, like that
and now we also add this height declaration right here to our body element because what will work then
is if we go back and reload the page, we can see that the backdrop is working apparently, it moved down the
other elements below it because it's relatively positioned, so it stays in the document flow
and the backdrop also doesn't cover the elements down here,
we'll dive into the reasons for that in a few seconds
but the interesting thing is that now we added the 100% height to the HTML element right here,
to the body right there
and with this declaration right here, we are now also able to make this height value right here
to 2 which is basically the same one that we have in the body, to make this work.
So this is this quick workaround
I wanted to show you. Regarding the issue we have right now
that basically this element is above the others,
well this can be solved easily of course. What we can do is we can simply go back to our backdrop and
now change the position value from relative to absolute
for example. If we do that, we don't need that trick as I would call it,
so we can get rid of these height declarations right here and if we now reload the page, you can see that the
backdrop is working,
this is fine,
there are two problems though.
The first problem is that if we scroll down, well it still doesn't stick to the viewport
and the second problem is this gap up here.
So regarding this gap up here, this is simply due to margin collapsing because if we go into our main
element, into the div and now open or click onto the testimonial class, we can see that we added
a margin to it, right here a margin top and this margin
and if we unselect this and the other margin, then we can see that the backdrop covers the entire page.
This is a typical case of margin collapsing, a concept Max already explained to you and therefore you
can see what you learn in this course really happens when you create your websites. However, we have
to activate that for the moment because we won't remove that margins
and before we talk about this issue down here, I want to think about the reason why this is working now
actually, because as you saw, I remove these 100% height declarations and nevertheless, the backdrop
generally works,
besides that margin collapsing stuff.
The reason for that is that if we use position absolute for our element, then the conditional block would
be the closest ancestor which has a position property different from static applied.
That's not the case for us because the body in our HTML have the position property applied
and if that's the case, so if you don't have such a position property for the ancestors, then the position
absolute declaration leads to the same behavior as position fixed,
this means the percentage value refers to the viewport as the containing block.
That's a reason why this is working right here.
Nevertheless if we scroll down, we can see that it of course doesn't stick to the viewport,
it just takes the height and width, the percentage value is based on a viewport but it behaves like
a normal absolutely positioned element.
Therefore if we now change position absolute to position fixed right here and reload the page, we can
see that our backdrop is basically working,
we still have this margin collapsing issue though, this issue can be fixed quickly though.
If we now just add top zero and left zero right here as two new properties and now reload our page,
we can see that our backdrop is working perfectly.
And with that, we added this backdrop and in one of the later lectures of this module, I will show you
another unit which also allows us to solve this in an alternative way because we will use the the vh
and vw unit which refers to the viewport, which will basically lead to the same result but with a different
solution
but generally, our viewport is working fine now.
The only problem is that we don't have the viewport on all of our pages because it should also be on
the starting page
and on the packages page and the other issue is that we cannot click around anymore because our backdrop
is now, well basically on top of all the other elements.
So let's first add maybe display none right here to make it disappear
and if we now reload, we can again click onto our website
and now we just have to add the element, so right here,
our div class backdrop to our index.html
file in the packages folder right here,
like that and in the main index.html file, also reload the body right here, like that.
Now let's save all that and with that, we saw how we can fix this strange behavior with height
100%
and we also saw one way, how to quickly add such a backdrop.
It's not the final version yet though because as I said, we will learn how to use a different approach
and of course we also have to add some Javascript because if the only way to make this backdrop appear
and disappear is adding display none or not, well not the best way probably.
But with that, we have a good status now and we can continue in our module.