How can we work on the position of elements?
Well, as you can see attached to this lecture,
you can find another theory project,
which will help us to dive deeper
when it comes to this question,
this project is pretty simple actually, in our body element,
we have three divs, this one right here
with an ID of container, second one and a third one.
The lower divs right here are things you can ignore
I just added these to be able to scroll on our page,
which will become important in a few minutes.
The important div is this first one here
with the ID container, as I said which contains
three paragraphs with the IDs one, two and three
because we will work with these three elements.
From a styles perspective,
things are also pretty straightforward.
We have a general style for the div and for the paragraphs,
and then we have specific styles for the container div.
So which covers these elements here for the paragraphs
inside of this element so the white color for the text
of these three elements and then we have
dedicated colors for each of these single elements.
Now, as you saw in our project,
you would like to bring our hero content, the sparks
so to say down a bit. Now to bring things down
we have multiple options, one way to move elements down
is to change their position in the so-called document flow.
The document flow is the predefined order of elements in
HTML. At the example of block elements
which I will focus too here, is that
we have one block element after another, so one, two, three
no way to change this order. We solve that
we can do this with Flexbox for example,
but generally elements follow this strict document flow.
Now the position of these elements, though,
in this document flow can be changed. And for this,
I want to focus on to this ID number two, right here.
The default position of elements in this document flow is
the position property and the value is static.
With this value being applied,
nothing changes. The elements are where they are,
and you can also add additional properties to work on that
position. Not with aesthetic value though,
but you can do this. For example, the top property here.
The top property helps you to change the distance to the
top. There are different ways.
How does distance is measured?
But generally you could say right here from its current
position, element two should be moved down 20 pixels.
If I save this, nothing is changing.
Element two is still at the same position because position
static is the default behavior and here it cannot be
changed. Things are different if I changed a value
from static to relative here.
With that, the element is moved down now.
Now that's very important, the element is still part
of the so-called document flow.
Although the element was moved down
element one and three are still at the exactly same position
so these elements behave as if element two would still be
where it was at the beginning,
but still element two was pushed down a bit.
You can also move it up either by adding a minus here.
So minus 20 pixels, or by adding the bottom property here,
this will change its initial position starting from the
bottom, so if you save this, you see
it remains where it is because let's comment this out
we said from the bottom, so from here,
your default position in the document flow should move up by
20 pixels. This is also possible for
the left and the right, by the way,
right could be for example, 40 pixels with that,
it would move from the right border here to the left.
So starting here, right distance is 40 pixels
For simplicity reasons I want to focus onto
the top properties here though
so let's add top 20 pixels once again.
To summarize that with position static
we keep elements in the default document flow and we cannot
change the position with top, bottom, left or right.
With position relative, elements are still
part of this document flow as can be seen by the
unchanged position of other elements,
but with top, bottom, left and right we can move elements.
So in our case, moving down our hero content
by a certain amount of pixels will do the trick for example.
And as this was our goal, we will now go back to our project
and apply this concept right here before we then
dive deeper into more position values that we have.
Back in our project, I'm here in our ID select for
the hero content and as our goal is to move
this hero content down a bit, we can now apply
this newly gained knowledge by adding the
position property with a value of relative here, like this.
As you see nothing changed, but now by adding
the top property with a value of 200 pixels
just as an example, if we do that,
you see that we successfully moved down our content here
and it looks a lot better already.
Now, as I said, this is not the only value for the
position property. Before we dive deeper here, though,
in the next lecture, I would like to focus onto some styling
If you already know, I would like to make this content
here, the zero content look a bit more beautiful.