Hello and welcome.
In this to you.
We will be true.
What a reality position.
It's a reality.
Position is a position that is relative to the normal position he was created in.
So the reality position is affected way in the top right bottom left.
Properties are just.
So by default we see it relative positioned element appear normal like they are static but they can
be repositioned using the top right bottom left properties to adjust from the normal static position.
But when they are created they do assume a static position which can be affected by setting the properties
for the top right left or bottom corner.
Let me show you an example is always set up when you see the examples for these.
Okay I've got three deaves here have given them giving deaves given them in width and height so that
they are pronounced have also displayed them in line block.
So deaves are block elements.
That means when they're created they appear on separate lines but I have use the display property to
stack the mob horizontally so if I expand this browser you can see.
So right so these are the boxes.
So at the moment I have set the position at the moment is normal or static.
This is how they are created by what out for the Green Box.
Here I am going to play a reality position which will affect it.
He will move from the original position compared to the blue box this pior have applied a reality position
to the green box here.
Hi I have made some movement.
I have told it to move 30 pixels from the top and also all 30 pixels from the left.
So by doing this it will shift from the origin or normal position of the other blue boxes.
So let's see that in full screen.
Right so this is the dreambox I have applied pics a value of 30.
I told it to move in relative to the original position deal original position is where the blue boxes
are.
So I've now told it to move 30 x has from the top to move down from total pigs from the top moved total
pixels and I'm also told from left to move 30 pixels so that is top.
Right bottom left.
So from left we have told it or move we take pictures as you see that big gap.
Look at the gap between these two.
School most normal gap here is why that because this green box has moved so it's all turned the position
relative to the other blue boxes.
What happens when a relative position of cause and an element is moved the space you notice is creating
some space.
That space is not occupied by any other element on the page.
If you look out we've got a page tag here in town.
We give a paragraph of text text a paragraph tag and also the Are there blue boxes.
But none of them will take up this space created by this box moving from its original position.
So the other content or the other the other deaves on the page will not be adjusted to fit into any
gaps provided by this green box here.
So this is how reality position works when an element is set to a relative position.
Can I just any of the callers at the top.
Right.
But on the left where you just it will obviously create some space because it would have moved or shifted
from its whole original position.
However the gap that is left is not occupied or adjusted by the other elements on the page.
If you notice all the other elements I did have maintained their original position.
The paragraph tag here the header tag is blue boxes the divs or kept position I live in that move is
a green box because he has had a relative position set on it.
But the gaps left is not occupied so the gaps will be left there.
None of the other elements on the page will take all that space.
In this video we went through what a reality position its reality position can have.
The top right bottom left properties of a relatively set amount affected.
What happens in the space of the gap created by that element moving is not just turned or occupied by
any other element in that page.
So the only element that is affected is a lemon.
The relative position of this applies to every other element on the page maintains their position.
Thank you so much and I hope he has made sense.
It's been a pleasure doing this for you by now.