In this video.
Let's talk about absolute positioning before we get into code.
Let's look at the properties of Absolut positioning.
The first point is that element will be positioned relative to its closest parent, which has position
core relative.
What does this mean?
It simply means that if you add a position called absolute to an element, it is always going to look
at it closer to parent, which has a position called relative.
Then it's going to position relative to that particular element.
The differences between absolute and then the relative is that for relative, it doesn't look up to
any parent before a composition itself relative to it.
But for absolute, it always looks up to a parent which has position being set relative, then going
to position relative to that particular parent.
And I'll show you with code.
The next point is that element will be removed from the document flow, meaning that the remaining element
will behave as if there is no element that is the opposite to the relative position.
And I would move for you to the next one is that it can be moved horizontally or vertically using the
left right, top bottom properties.
And this one the same as the relative position in the next one is that the offset values for these properties
can be either positive or negative, which determines whether the element will be moved closer or far
away from the normal positioning.
And this one is also same as a relative position.
Let's get to a Visual City code and put into practice.
Well, this is where we left and I have made a copy and paste and rename the previous one to relative
as that and we are going to work on the index and this one we have as before and inside the CSS for
this one, I have removed all the properties with the exception of background height and weight for
each child.
So let's see how we are going to work.
And then let's look at the index to, as I showed you, is the same as before and I've changed the name
to absolute.
Now this is what we have next is let's go ahead and add property code position to the green one.
Now when I make this of position which is absolute now when I save it, have a look, it could see that
it has moved from the document flow and then the other element behave.
There is no element.
That is why the parent has been reduced to contain eight children.
So it means that this parent does not know the child of green because it has taken from it document
flow.
That is a point that we raised here.
That element will be removed from the document, meaning that the remaining element will behave as if
there is no element.
So the parent is behaving, there is no elements.
But the cool thing is that I can control how I can position this one.
I can put it here or here or here or here.
So now we also have access to the top left, bottom right property.
If I sit top, look at the strange thing here.
When I save it or look at it, you see where it is positioning.
It is positioning to the top of the window.
Let's get to point number one.
It says that element will be positioned relative to its closest parent, which has position core relative.
So it may be thinking that there is no element with position or relative.
So how is this one able to do that?
Well, here is a clue.
If there is no element with the position called relative, it is going to look up to the parent, which
is the viewport, the HTML.
So if I add a position to the body, let me show you something here.
When I say position called relative, you can see that it is position to the top of the parent.
And this is a parent here because we didn't specify or reset the default.
That's why we see this empty canvas here.
So if you want to reset the default behavior without having a margin, as we discussed before, you
are going to be margin zero and then padding.
Zero.
And let's see where it's going to position itself now.
This is the body.
That is where it is positioned itself, too.
So with this one, I can move this one to the right.
So when I say on the child green, which has position called absolute, I can say right also zero.
And you can see where it has positioned itself to many top here is zero and then right here is zero.
But in most cases you want this array or element to be positioned in a certain container, as I did
in the final project.
You can see that for this one I have positioned this particular element at the top here of this particular
container.
So how are you going to achieve that?
That's why we say that if we add a position called absolute, it is going to look up to its nearest
parent, which has a position called relative.
And looking into our code, there is no element that we have specified that issue position itself to.
So if we want to position, we need to give the parent a position called relative.
So now if I come to the container, then I give it position called relative.
Now let's save it and let's see, let's come back here.
And now you can see where it is pushing itself to.
Now, it didn't look up to the parent or the body because the nearest parent, which is a container,
has a position called relative.
That is why it has positioned itself here.
And we can reduce the size of the green.
Let's say the the height is the weight is 50 and then the height is also 50.
Now I can see how it's being positioned and I use that technique to achieve this.
And if want to put this one, let's see at the bottom here, let's see how we're going to achieve that.
So this time around it is not top zero, but instead it's going to be bottom zero.
So here we can make it as pixels by and the value as it is, same as I did before.
So if I change this one to bottom to be zero, I'll start now.
Let's see if we see how it is position itself and if I want to be this side, what would be the value?
Well, it's going to be left here zero and bottom zero, and that way it would be this side.
So when I say here as left now you can see where it is positioned.
And if you want to move this one away from this side, then we are going to increase from zero to,
say, 56.
And you can see how I'm positioning the last position properly is going to be a fixed position.
Let's talk about it then this video and then we start with our project and put into practice all these
concepts.