Voiceover: We're now going to talk
about element positioning.
So far, all our elements were
relative positioned elements.
That means that their position on the Web page
is determined by other elements.
Now, elements with absolute position
can be positioned anywhere we want
inside their parent elements.
But I guess I better show you how it works, right?
Now back to our Web page.
Suppose we wanted to know which date
this article was written.
In order to do that we can position a date,
let's say in this location here,
and the easiest way to do that is probably
with absolute positioning.
But let's first start by create a little paragraph
where we could write that date.
I will write that right after the main heading for now,
but don't worry, we will position it then later.
So, it will be a paragraph,
and I will call it just date.
And let's say, March 11th, 2015.
So, how does it look?
Not quite as we wanted, right?
So, let's format it to put it exactly where we want it.
So, back to the CSS, down here I will add
a date class, as you already know how to do.
Now the first thing we need to do is
to ensure that the parent element is
a relative-positioned element.
In this case, the parent of this p element
is this blog-post div.
So, let's edit it and say that it's
position is relative.
All right, now we can format this class here.
So, date as position absolute and not relative.
And now, to put it exactly where we want it,
we just say top zero, which means that it's
right at the top with zero pixels between
the top and the element, and right also zero,
which means that there is no distance
between the right side of the
parent container and the element.
And there it is in a top right corner, just as we said.
Now it's not quite where we want it yet, right?
So, you remember this pairing between
this box and this was 30 pixels, right?
So what we can do is to say that this element
should have 30 pixels to the right side,
which will move it all the way to this place here.
And now it also seems a little bit
too much at the top, so we can say that
there should be a distance of 10 pixels.
So, back in the CSS, the top is now 10 pixel
and right, let's say 30 pixels.
And there it is.
Exactly as we wanted.
All right, so, this is absolute positioning.
It's very easy and very straightforward.
We just have to ensure that the parent element
is relative and that the absolute element
has a position property set to absolute.
As always, more on that later,
when we will be working on our
big big website project.