0:00
Hello and welcome to tutorial's point
0:02
In this video, we will learn about the positioning property in CSS
0:06
So let's not waste time and get started. Now let's talk about the CSS positioning property
0:13
All right. Now, the position basically specifies the type of positioning method that we use for any HTML element
0:20
Okay, so how do we do that? Let me just remove all this. Okay, let's save it and let's just keep this right there
0:27
And let me just remove all this stuff. Now, what we are going to do is I'm going to create a do
0:34
And let's have anything, any text in this deal. Let's say this is a static deal
0:41
Now, why do I write static? Let me save it and this is a static due will be here
0:45
Let's give it some styling. I will target this due and I will give it a border
0:50
Let's give it a margin first. Let's say margin of 30 pixels
0:55
Save it and we have a margin. Let's give it a border of 2 pixel
1:00
solid and green and save it so this is a static deal what do we mean by static now note that all
1:08
the html elements are by default in static position okay a static position means that it is in the normal flow it flow It is in the normal flow of the page basically All right Static is nothing
1:20
It is just a normal position. Okay? So if here inside this deal, I'm going to write position static, nothing will happen
1:28
It's the same one thing because it is already static by default
1:33
So this is the first type of positioning. Now we have a second type of positioning as well
1:38
That positioning is called as a. the relative. So I'm going to set this to relative. As you can see, the box's position is
1:45
calculated according to the normal flow. Then the box is offset relative to its normal position
1:50
So the normal position is this right now. But when I say relative and save it, nothing will
1:55
happen. Why will nothing happen? Because let's understand the literal meaning it's relative
2:00
to something. So basically it's related to its parent here. The parent here is the viewpoint
2:04
or in simple terms in our index.js or our index. HTML, this do
2:11
Who is this div spirit? Of course, the body, the body. Who is the body of our HTML document
2:16
So we're essentially talking about the viewport, whatever we see in our browser here
2:20
So simply it is related to that. So in relation to the screen I want this deal to be from top let say 100 pixels When I save it as you can see the distance from this border to top is 100 pixels So this was positioning of a relative So this was position set to a relative Now after this we have something called as position fixed How can we check that Let me just go back to index Ht Let me create some multiple elements here For example I will create some headings This is a heading Let see
2:54
create a couple of these. I'm just good. This is for the purpose of demonstration, a paragraph
2:59
Let's say a paragraph of 100 words, something like this. Still, it's not cool
3:05
Actually, it's inside this deal. Yeah, it's outside this deal. But yeah, you've got my point
3:10
This is because of the positioning part. Let me just remove this positioning part now
3:14
Something like this. And yeah, there you go. Now, instead of this paragraph, I can have another paragraph
3:21
Let's say a lot of 300 words. And as you can see, we now have the scroll bar
3:26
Now, why am I showing you this? I'll let you know. For example, you may have seen on many websites, we have scroll bars that are sticky on top, that are stick to top
3:37
Right. So basically we can do this with this too as well I just going to remove this margin We don need it It on top right Now I want this to be stick for that We also have a position property I going to write position and I going to write fixed I say fixed And as you can see this position
3:55
by default, it's fixed on top. Okay? So this position is fixed on top. Now, what happens when we
4:01
change the position property to fix, what happens is by default, this do is actually a block level
4:08
element but it changes it to inline element when we change its position to fixed right so if i say
4:14
fixed then i can have any position for example i want it to be fixed from top zero or basically
4:21
from top 20 pixels and save it now it's fixed to 20 pixels and i want it to be from the right
4:27
side 10 pixels so this will go to right side now even if i scroll down it will always be there okay
4:33
let me just have much more paragraphs here something like lower 500 save it now if i scroll as you can see if it is visible i'm just going to give it a background
4:44
color of red okay something like this now even if i scroll down as you can see this is going to be
4:51
fixed here on top right corner of our web page so this is how we use position fixed property
4:57
and this is you will see many of the websites are
