In this video.
Let's talk about types of cases, positioning properties.
The first one is what we call static positioning, and this is by default.
Every element has this type of positioning.
And then the next one is what we call the relative positioning, absolute positioning.
And lastly, we will talk about fixed positioning.
So in this video, let's talk about relative positioning.
Before we get into code, let's look at the properties of relative positioning.
The first one is that it is positioned relative to itself, meaning to its original positioning, and
I will show you with code.
The next point is that it position element can be moved horizontally or vertically using the left,
right, top and bottom properties.
So for that particular element that has a position called relative, we can move that element to the
top, bottom, right or left.
That is how relative positioning works.
The next point 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 its normal positioning.
Which means that if we use negative value, it is what, moving closer to the element.
But when you use positive, it is moving away from the element.
And I will show you as we move on.
The next point is that relative position does not remove an element from the normal flow of the document.
So any element that we use position, relative other elements behave that it is still the but behind
the scene it is not.
So it doesn't remove the element from the document flow or normal flow and I will show that I want you
also.
The next point is that the position elements can be layered on top of other elements or it can be placed
behind them using what is called Z index.
And I will explain to you what is Z index?
The cool thing about this kind of position is that we can position these elements on top of any elements.
So let's say that this is the page.
I can position it here or here or here or here, and also I can put it on top of each other like stock,
and I can decide that for the blue one it should go behind the other element and we can achieve that
using what is called the Z index.
The next point is that it positioned element is always determined with respect to it containing block,
even if that containing block element is also relatively positioned well enough talking.
Let's get back to visual, see the code and see how this properties comes into play.
So here we go.
As always, I have fresh HTML weights.
Mtc's.
So let me link up my CSS to the HTML.
So here we go before my title.
Let me bring in my link and one dot slash.
I have my CSS, so let's have some structure.
Let's say that we have a dev with a container attributes as that with a class.
And next is inside this dev we are going to have two children inside this dev and dev number one, I'll
call this one as child one and then nothing inside for now.
And then I'll copy this one and then paste it here when I be asked.
Child two Now let's have a look before I save it.
Let's comment this one out and let's had one dev and give it a class core child.
I will come back to this very soon.
Now let's save it.
So let me right click and open inside my browser and this is the page.
Okay, so let's get to the CSS and play around the relative positioning.
So.
Now for the thesis, I want to add a position to this particular element.
Before that, let's add some styling to that one to see how it's going to behave.
So let's give it a background color of, say, red and give it a height of, say, 200 pixels, and
then width also adds 200 pages.
So if you save it, this is what we have I think is too much.
Let's make it as 150 pixels by 150 pixels and let's see 150, 150.
Good.
So for each element we have CSS property composition and for this one we have these types of positioning.
And the first one is what we call static.
And this is by default every element has.
If I started, I could see that nothing changes.
But if I change this one to say relative, the one that we are talking about now, also nothing changes.
But the cool thing is that as soon as I added the position called relative, I have additional control
how I can move this particular element to the top, bottom, left or right.
So here we have a property called top.
As that is, I give it a zero pixels.
What I mean is that at the top here is supposed to be what zero spaces where it is this where it is
originally, right?
So it's being positioned relative to itself.
So let's say that I want to move this particular element from its original positioning.
How am I going to do it?
And we are going to use the properties called top bottom, right and left.
So if I want to move this particular element to this side, I'm going to add a property called left
here.
So here we have a property called left and how many distance you want to move it?
So let's say I want to move it 200 parsecs from left.
You could see that originally it was here, but I'm able to move it to this side.
If I want to move it far away to the side, I need to increase the value for this, let's say 900.
You can see how it is moving.
So originally it was here and see how it is moving from it.
Normal positioning and you talk about the offset, meaning this value can be negative.
You see, when I provide that positive, it is worth moving toward the element.
But when I provide, let's say negative, what I mean is that I want to move this particular element
to this side.
Negative, meaning offset.
So if I change this one to, let's say -100.
That is the behavior of the relative positioning.
So let's bring back these elements in the mix by explaining to you that the relative position does not
take the elements from a document flow.
Now, if I save it, nothing seems to be happening because there is no styling on these elements.
So let's say for the child, one, I want to have this and let me move the left here and the top and
all the properties and let me copy this one.
For child two and for child two.
I want to change the color to green.
Now we have these two elements and for the container that is the parent, I want to give it some border
around the parent.
So let's see.
I want to give it a border as one or three pieces solid black.
Now let's see.
You can see how it is moving because there is a block level element.
It is taking the available space as much as it can.
And I can control the weight.
Let's say I want to give it as 500 pieces.
Now this one is okay.
Next point is that let's apply positioning relative to each of these child.
So let's say that for child two, I want to give it position called relative.
And that's a great one.
If I give it left, let's say left side, I want to give it as.
$200 as before.
You could see how it is moving and these elements are not adjusting.
It means that this element behave that there is element here.
That's why we say that this positioning does not take the element away from the document flow.
It assumed that it is dead.
So I can position this red one also away from the parent.
So for the child one, I can add top of say $0 from the top.
Now what?
I mean, nothing changed because on top here, $0, that's what we have.
But if I want to move it away from the parent, I'm going to give it a negative value.
So here we go.
Let's say negative ten P6.
Okay.
I think that one is not that much.
If I give it of, say, 60, well, nothing seems to be happening.
The problem is that there is no position called relative.
That is the problem.
If I save it, you can see how it is moving away from the parent or from its normal positioning.
So let me bring it back to, let's say $20.
This is cool.
And if I want to move this one to the same position.
Now let's see.
So for this one, I want to remove the left and say I want to go to the top of the same as -$20.
So let's save it.
And you can see that it has moving $20 to the top.
It's going to be on top of each other.
So if I increase this one to say 50, you can see how it is moving.
Now we have the green on top of the red.
And if you want the red to be on top of each other, we can use what is called Z index.
Well, let's say that I want to have some space around here on the green.
I'm going to add left with value, say 146 and if we see that now, it's clear that we have the green
on top of the red.
I think is too far away.
What about 100?
Yes.
And let me increase the top one to say 86.
And you see how we can achieve this effect.
If I want this one to be on top of each other, we are going to use the index.
So what is the index?
Well, it controls the stock in order of an element.
The higher the number it would be on top of the other.
Now we have green on top of the red.
If I want to move the green below the red, I'm going to give this one Z index of, say, one, and
then the red of say two.
So let me add the index to the red one, say two, and then for the Z index for the green, let me see
one.
Now you can see the order.
I have changed the order using the Z index property and we can use this property to lay out elements
to be on top of each other as we have done here.
So this is the behavior of relative positioning.
The next video, let's talk about the absolute positioning.