Hello everyone.
And welcome back.
In today's video you learn about opposition in Yemen elements CSX provides us with the following position
by using static relative absolute fixed and sticky.
Let's try the first one stop it is there different violence with extreme elements.
Whether we declare it or not elements our position and no order on the beach let us strike one example
on the sun but don't say we've got this image here.
So let's try getting the position static so let's make a buck with it.
OK so so we've already got an idea for the image mounted image.
So you're let stating the position say position.
Static let's say that.
And as you can see nothing changes let's try bringing it the bottom moneys.
So it's a top 16 pixels or lets a hundred pixels.
Let's try getting a left of our Lucy vixens and as you can see these values aren't affecting we are
going to make this position in the normal order.
Moving on to the next one which is finishing relative positions extreme elements relative to their normal
position making an extreme attainment relative gives you access to the elements from its normal position
by using Top Right Bottom Left properties.
Let's try an example in the standard that doesn't say you have this image on this image is not any different.
So if you open the good.
So we've got an image about an idea let's try giving us a position relative so let's remove these models.
Let's give it a position relative.
Let's say that as you can see nothing changes by default but do move this image to enough to use the
top right bottom and that's problematic.
And before we do that let's change the dynamic shifts of the day to completely about the image.
Think of it like it represents the original position of the image.
So the width and height is to enter pixels so that seems the same for our purposes with 300 pixels height
300 pixels.
It is got about a top so let's remove that.
Let's add some margin on the top say 80 pixels and let's add some model on the left see 80 pixels.
Let's save it.
Now obviously completely behind that image.
So let's go.
I got value to our image.
So top saying sixteen pixels.
As you can see the image moved sixteen pixels from the top edge.
Let's try increasing the value say 36 pixels.
And as you can see image move more towards the bottom.
So it is 36 pixels from the top edge.
Similarly let's try right.
So let's say 10 pixels.
And as you can see some images now then pixels of which on the right edge.
Let's try and create the value of say 32.
And it is more away from the right edge.
Let's try our negative value.
First let me do zero.
It's not acceptable to be on the right page.
So if you give a negative value C minus 16 pixels it moves to the right.
So it's going in the negative direction off.
All right edge.
That's how we use this position relative to move the element from its original position.
So as you can see here on the top bottom we've got these many likeness and they don't seem in the same
do vertically normally to move it down we could all use modern dot on the bottom button but it wouldn't
work here because these are the main elements.
So let's try it out first.
So this is the glass for menu item.
So let's try giving a margin Doc say 30 pixels and as you can see still in the same position.
Let's try again in the bottom drops a total six thirty pixels.
Again no difference.
So do means that we can use the position but and then use the top relative to move towards the top.
Let's try that C position relative.
Let's say that.
Now let's say opposite it's in the same position.
Let's try giving it a negative value to talk so that it means towards the top edge.
So let's say minus 60 pixels.
Okay.
You it do too much too.
That's right.
When it's done let's run minus eight minus five.
That looks much better.
All right so moving on to the next one which is position absolute it positions the exterior element
relative to the first an element that has a position other than a static.
Let's try an example from the standard but don't say you have this image of Bob and then Derek let's
make the bit in the US position.
So this is output isn't made index on its position relative.
And let's give this image as an absolute so position absolute.
Let's save it.
Let's write do want to say double zero.
Let's say let.
As you can see the image moves to the top image of the beating death.
Similarly if we give another galaxy.
Left twenty pixels unseen.
It starts other 20 images from the left edge of the body to see me watching this on the right hand side.
So we could do something like this right.
Zero.
Otherwise you go nuts on the top right corner similarly if you wanted to move it to the bottom right
corner we could do something like this or not.
We can use bottom and now as you can see it is on the bottom right corner of the building.
So as I mentioned earlier this absolute position element is relative to the first the element that has
the other than static.
So let's say none of the Creator touch position is staggering.
So in that case it is position relative did not mean it's human element.
So let's right and we're in this position relative.
Let's bring it back to the
top left corner.
Let's say that are not as you can see it's on the top left corner like the beach but if you notice it's
coming on top of that number.
So far we have that x and y axis.
So basically we have a move and then means left dry dog on bottom but we haven't moved elements in and
out or in other words we're taking to the plate of ice cream for this group which we can use another
property point Z next.
This is index property can only be used one position has a value other than static not avoid this or
really give out but by Ohio's index.
So that's been about a it.
So this is our dog bar let's say Z next then let's say that nothing changes because he makes a box on
position like these other stepping.
So that seems like let's well inclusion relative now as you can see are images below the dog.
That's all for the device.
If there's something that you do not understand feel free to drop a comment and we will discuss it see
you in the next video by anti-gay.