the position property specifies our ailment is position it in a document using top right
button and left properties to shift the element to the final location.
This property can assume five different values static that is,
the default value related absolute fixed and sticky,
beginning with related position that allow us to shift our elements around in relation to
where they would have bean blessed by default.
Using related position,
you need to specify the amount that you want to shift.
The ailment using four properties top left bottom and rights followed by a value dead
corresponds to the distance to shift for the next example.
I want to apply that situations to the two deeps that I have defined in HTML for the 1st 1
I define a week off 300 pixels.
ICT off 100 pixels ended our great background color in the second day,
if I ever.
With off 400 pixels,
I've off 100 pixels and green as the background color in the brother.
We see the expected position off the deeps being one on stop off the other.
If we now set to the first related position,
giving a value off 20 pixels to the top property and 40 pixels to left.
It turns out that the first dif change position 20 pixels from the top and 40 pixels from
the left side changing its final position and the second dif without changes.
If I applied to the second day of the same values I created for the 1st 1 is expected at it
can be seen dead.
Second,
Dief is in the same position related to the second if,
as it happened,
it initially since the same offset values were applied to the two chiefs,
I will now give a final example for the related position in disguise.
If you want to put the second eve on the right side off the 1st 1 for the situation,
I will have to move the second if up to 100 pixels,
which corresponds to a value off minus 100 pixels to the top property end to the right,
corresponding to a left side offset that has to be equal to do with value off the first def
in disguise,
300 pixels we can now see the thieves are side by side as expected.
Now the absolute position that allows the place any patch element exactly where you want
using again properties top left,
bottom and right to set the location.
One important detail is that the position off the element is based on its closest position
assessor position for the situation Body is the closest ancestor.
What makes that shift that I give to defense is based on my entire page.
First I changed first dif with to 400 pixels and second to 300 peoples.
And if I said the first and second defeat to the absolute position and and left and top
properties with zero value that makes that two thieves are placed on the top left off the
batch,
we'd second dif above first.
Now if I change left until values off second Eve to 100 pixels,
you see that this div moves to other parts of the patch corresponding to the shift That's I
apply now to finish the foot position.
I present another different situation,
creating assertive within the second.
With this structure off gives the second Dief is the ancestor off the search.
So if I create for 30 if with absolute position and left value off 50 pixels,
this dif will move from left to right,
50 pixels related to the position off the second if and not in relation from the top left
off the page.
There is also a second type of absolute CSS positioning called fixed positioning,
which you can use to locate an HTML element at an exact place in relations to the user's
screen in step off brother.
We know the difference to absolute here is that the ailment will remain in exactly the same
position,
even if the user scrolls down the page is what you see now where I said the first div with
the fixed value for the position property and I placed the second,
the further down the page and we the ICT off 1000 pixels to be able to scroll the badge and
see the respective effect.
As it is,
we're five now on the page.
The first def stays in the same place even when you are strolling the page.
Finally,
this sticky value where the elements is position it based on the user's scroll position.
A sicky element changes between related and fixed,
being treated as related position at first until it crosses a specific threshold at which
point,
it is treated as a fixed positions.
Let's see an example to understand better disposition value.
I have now on the batch set one paragraph and two chiefs,
the first dif I set with sticky value.
And for the second I add the merging top property with Valley off 200 pixels.
Despite the two dif and I off 2000 pixels.
To be able to use the scroll to see the effect,
it's now necessary to defining the first Deve di Tresh hold that will tell at which point
did Eve becomes fixed.
In this example,
I defined the top property with the value 10 pixels,
which will cause that when the Deve is at this defined distance,
it will remind fixed a situation that you can see now into the browser.
If you want to change the position in which it is fixed up or down,
just changed the value off the top property.
I have now changed zero and you see differences when compared with previous example,
we tend pixels for top value,
thinks