I'm back in our example project.
You can, again, find it attached to this lecture
in case you missed it previously.
And so far, we sorted with position relative.
We were able to position our hero content
exactly where it should be.
However, now, we have the problem that our background image,
so basically, an element which contains this image.
So it's our diff,
which has the background image property applied in CSS.
Well, this should be behind the header.
Now, the problem is that the header comes first
and afterwards comes our main part with the diff
that contains the background image.
Therefore, we have to change our normal document flow.
We saw that with position relative, well,
we can move elements around.
And if you would add minus 200 pixels here, for example,
then we could move this kind of to the top
and try it like this.
But this would be a trial and error process
and nothing we recommend.
So that's not the way to do this right here.
However, besides position static and position relative,
we also have two other important properties
which might be helpful here.
One property is position absolute.
This one, and before I apply it,
I want to remove this top logic here.
If we do that, we see some very interesting things.
The first thing is that we have element one now,
and element three, which is following element one.
But in element three, at the beginning, we have element two,
but not using the entire width anymore.
But behaving like an inline element,
but that's not the core thing here.
The core thing is that this element
is now taken out of the document flow.
This means,
although it looks like it would be an inline element,
it's actually no longer existing for the other elements.
If we quickly open the dev tools and inspect these elements,
you'll see that element three is not positioned
next to element two.
It still occupies the entire space.
It just ignores element two.
And this is basically positioned, well, above element three,
but for element one and three.
The second one who was positioned absolute
is no longer existing.
This means we took it out of this flow.
And we can now freely position it.
To position it, we can again use our top, bottom,
left, and right properties.
If we get started with top 20 pixels, again,
what do you think where this element will be positioned?
Well, it's positioned where actually? Hard to tell.
Let's add top zero maybe.
So no distance to the top of, well,
we'll see whatever it is.
Now, it's interesting, right?
This element seems to be positioned at the top, well,
of the HTML element or the body element.
We cannot tell it at the moment.
So let's, again, open the developer tools right here.
And let's now in our code add the HTML selector
and add some margin of maybe 50 pixels to it.
So it looks as if the element
is now relative to the HTML element.
Well, things become a bit more difficult
if we now add position relative to our container here.
So to this ID.
Let's do this with position relative.
Then the element suddenly
is relative to this parent element.
Now, what does this mean now?
Well, generally, if you add position absolute to an element,
then it will be taken out of the document flow
and be positioned relative to the first ancestor,
which has position relative applied.
In this case, this would be our container.
If we get rid of that, you'll see it just goes up,
up to the HTML element and behaves relative to this.
There are more exceptions here
and more conditions on which elements should have
which rule applied so that the absolutely positioned element
is related to this element.
But as for Flexbox,
you can find more details about these rules
attached to the last lecture of this module.
For the moment, it's just important to keep in mind
that for our structure here, if we apply position absolute,
we can position this element relative to the HTML element.
And if we would remove the margin from the HTML element,
then this would mean that the element here
is basically relative to the body, which would be exactly
the behavior we need for our navigation bar.
And if I zoom in a bit here and scroll down,
you can see that the element sticks to the top.
So it is positioned relative to the body here,
but by scrolling, the elements stays where it is.
This would be exactly what we need for our project,
but sometimes,
you might want to have a sticky navigation bar.
This can also be achieved easily
with another value for the position property.
And here, the value would be positioned fixed.
With this being applied, nothing changes at first sight,
but if I now scroll down,
you see that the element stays where it is.
So it sticks to the visible area of our page.
This visible area here is the so called viewport.
So the viewport is what you can see right here.
That's very important.
The HTML element and the body we talked about
starts at the top, starts right here as you can see it.
And if I scroll down,
I cannot see the entire HTML element, right?
But I can see this viewport.
So the viewport tells me the current position
of the webpage that I can see.
And I can see parts of the HTML element
or of the body here,
but I cannot see the beginning of the HTML element.
And that was the difference to position absolute.
Position absolute was relative to the HTML element
in our case.
As no ancestor had the position relative rule applied.
Therefore, it was out of sight if we scroll down,
but fixed is relative to the viewport.
So the area that we can see here.
I can also prove this to you if I comment
back in our margin.
Now, you will say,
"Okay, this looks exactly the same we had before.
"It sticks to HTML element."
But if I now, again, add the position property relative
for example to the container,
then this doesn't have an impact.
As you can see the element stays where it is.
However, position fixed is not what we need
for our header here.
Therefore, we can get rid of this
and also of this margin up here.
And change it back to position absolute.
And to quickly recap that now.
With this logic, we will be able to add
our header on top of our background image,
which could be the element one here in our example,
which would hold the background image.
And with that, the header would be on top of our main part.
So exactly what we want here.
The problem here though is that, well,
the way our element is displayed here is not the one
we need for our header and the navigation bar.
It should use the entire space available of the page.
And this is the next thing we'll have a look at.