Hello and welcome to this video.
In this video I will be explaining what the fixed position is when a elemen has a fixed position.
It remains in the same position regardless of which way the scrolls.
So you can scroll up or scroll down that term suppose a shot will be fixed.
Let me show you.
This is a fixed position.
This little blue box.
And this is some tape so you'll watch regardless of which way I scroll that position remains fixed because
that's the way I have positioned it to be fixed.
So you can position it anywhere.
I could have positron it right on the bottom of the screen here but longo's is in a fixed position.
It will not move regardless of where you scroll.
You can scroll up scroll down sideways.
It will not more.
So basically this is what fixed position does.
So if you've got some content you want to remain fixed like images and stuff like that you can use a
fixed position to achieve that even when the page is printed.
That position will remain fixed on the printed document.
So the fixed position does not leave any space for that element.
So the position is relative to this screen viewport that most is relative regardless of whether you
move or down sideways.
The position is fixed.
This is the Seer says responsible for setting the position of this blue box here.
So you begin with the word position as a prop..
And they followed by a colon and then you need to specify the type of position in this case the type
of position is fixed.
So you need to specify that was specified.
You then on the next line you specify either top or left as a value as a property.
So I've specified the top.
I wanted to put xishun at the top of the document but 80 pixels from the top.
So I say top left.
So this is the top of the document and left up the document right.
Would be the opposite direction.
So this is top left and from the top.
Told it'll move down 80 pixels so that's why as drug done 80 pixels from the top and at all the top
left if not the left.
I'm going in the 10 pixels from the left so from left here have told it to move 10 pixels and is moved
10 pixels from the left.
Top right bottom left.
Well I've specified the here is 80 pixels from the top.
Move Haiti and left from the left here.
Move 10 pixels has been position was meant is position is fixed regardless of what direction you move.
If you look at it scroll through and you see that you look at the make list is fixed.
It does move.
His stand is ground regardless of where you scroll.
You see that.
So this is achieved using the position property with the value of fixed and then also set in the top
property of the element with a piece of value and then set in the left with picks.
So any other properties here and values are just associated to make the two may be all the box look
nice.
Well the key thing here is the position.
What is responsible for the position of that element which is position fixed and then given it a top
value and the Left value has it's in the end since fixed so regardless of where I move the mouse it
remains fixed.
So this is useful for a website lay out because there may be elements you want to see in a certain position
regardless of where you scroll or where the page is.
So this should help you achieve that.
In this video I explain what fixed position it's an elemen that is in a fixed position does not move
regardless of the direction you move the page.
You can scroll up or scroll down me.
I'll amend.
Well not more.
He remains fixed to where it has been positioned.
Thank you so much for watching.
I hope you now have an idea of how to set a fixed position on elemen for a web page.
Thanks Pam.
Bye for now.