We are going to discuss about the positions. So basically the CSS position properties specify the type of the position for suppose we have different type of position is static, relative fixed, absolute and the staking. So now every HTML element has it's on. The by default property is static, because if you are adding the h1 here, and you are saying, not h1, if I'm saying this is the div, and I'm saying, I'm starting this tape here, and now the call I'm saying this is my Dave, so add the class my day. So now I'm saying I'm calling the tape and I'm saying that what is sorry, what is 100 pixel and how Is 100% now I'm saying big round color is red. Go to the page refresh terms now as you can see the default position is the static of every HTML element.

So you don't need to write the coalition possibles coalition, static coalition. coalition static because the by default position is the study of every HTML element in HTML or using CSS or whatever you are calling. We are starting from the position related for suppose if you are if you want to shift your element from or if you want to move your element from left to right or top to bottom or bottom to tie up, it's totally depend upon you. Okay, so now I'm saying that you can also Use the margin property to shift your element. Because you know very well margin property, add some space outside of the element. So you, you don't need to use the margin.

So this is a problem. So how can you ship your element using position, so use the position property. And in this time I'm saying position relative. So now if you want to shift your element from left to right, it's okay to do that I'm saying, right, zero pixel, it's not working. Why we will say this about this. Now I'm saying a left hand pixel.

So as you can see, you are moving your element from left to right. This is the position relative property, okay, this is the syntax position relative to and also use the left and you can also use the top 10 pixels. So you are moving so as you can see, you are moving your element from top, you can also use the bottom property, bottom and exit. So now as you can see you are moving the element from bottom to top, okay, you can also use the minus sign minus. So now, this is the position related property, but what about the position fixed? So, you know very well if you have a website and you are adding chat systems like post the dice.com with a few seconds I'm just going to show you one example so easy understand what is the position faced property.

So, now As you can see, we have a chat system here. So if you are scrolling down your website, this element has the spaced property. Okay? How can you do that possibles? I'm saying, I'm adding many h1. I'm saying oh, this is my dad's.

This is my test. He Okay, now I'm copying the element history here. Refresh the page is now as you can see, this is that text and this is the your image or for your day. And this is your korma. Now I'm saying I'm going to position I'm going to use a position and I'm going to set this div here. So how can you do that?

I'm saying this is the there. You can also use Inspect Element Inspect Element. Now you can see I'm saying hold holy Shan static. Okay, so now you can shift your element by using possibles. I'm saying quite zero pixels, zero pixels. But I'm saying top sorry, this is the provision stated.

Not a static fix, we are talking about the fixed property. So now as you can see, you are shifting your element, right, zero pixel if I'm saying there is a day Okay, here, we go to the page, refresh the page. Now, you can use the Inspect Element. Now I'm saying position fixed. And now I'm saying, right, zero pixels, zero pixels. So as you can see yours here, you can scroll down your element.

Header fix poverty, okay, so now I'm saying autumn zero pixel, you can set the property or suppose if I'm saying this is the 10 pixel or I'm saying this is a 10 pixel, and I'm saying this is also the 10. Okay, so as you can see, this is the day you can Now set the position where you want to fix this fossils here. And now use that property to actually define a body. I'm saying 30 and the water. Now you can scroll down your element, scroll down, scroll down, scroll down, and you have the element at same positions because this is a fixed property. So now copy this code over this bad boy and paste this over here, my dear.

Find this dip here. You can also view the line of code so you can see in the CSS file and the line for CS white line for paste your content. Okay, so now you have just used the text property. In this way, you can use a fixed prop But what about the absolute property? Okay, make sure we have different type of positions static rotated face and absolute. By default every HTML element has a high default value the static so you don't need to use a static value and if you're using the relative value that means you are going to shift your element camping or quantification right left modern pop and if you are using the fixed value that means you are fixing a particular value to your particular element.

Now we are going to discuss about the absolute. Okay, now I'm saying I have two days. So this is wanted. And I'm saying I have another div. And now I'm saying class. I'm saying my days.

Okay, make sure this is my my day to class. Now I'm seeing my live to class. And now I'm going to copy just three properties to save my time. Now I'm saying this is the green. Go to your page, refresh the page. Okay, so now I'm saying hundred, start this hundred, hundred and out 100 here, refresh the page.

So now as you can see, you have just used the fence here. So remove this paste. Now you have two divs. The top div is my day. The second day is my Dave two. So top Dave.

Right, second, Dave is green because these are the block level elements. That's why your second element is starting below the right. Okay, so now I'm saying if you are using the absolute value for this red element, or suppose I'm saying Inspect Element. This is my div, which has the red property tag on red property I'm saying foliation absolute. Now as you can see, you are setting the position absolute value. And you're right, green Dave is this appeared or suppose removed this property here and use the position, absolute property to your green elements.

Now I'm saying position absolute. It's not working. Why? Now I'm saying I'm going to use Okay. Let me give you some examples. I'm saying physician absolute.

And I'm saying right now in You can see you have two different this so this is your first day and this is your second day. Now you're shifting your first day from left to right. But I suppose if you have a child and parent relationship This is the parent there and this is now the child refresh the page. Now as you can see your red there is disappeared. Why? Because you have added the okay okay where is the obese you are not using the position.

My day to day is a second Okay, you check. So this is your first day and this is your second. Well, the second day, I'm saying I'm going to use the position relative to your second day, which is this day. Because you have 200. If I'm saying it is 200 refresh the page, you are setting the tone if I'm saying 100 and this is the 500 words, refresh the page. Now you can see you have your 500 words inside here you have your red day, so don't worry about it.

These are, okay. So now I'm saying I'm going to use the position absolute to your inner element. So I'm saying ovation. Absolute. I'm seeing right See what is that. So now what you can see it's moving from left to right, if you want to restrict the inner st inner element, so, how can you do there go to your parent element and use the position related property auditions related property here.

Now, your child class or your child they use the 10 then and with hi as you can see, you have user 10 words and 10 pixel height and you are saying position absolute. Now, if you are saying position absolute zero and you are increasing like this So, as you can see it's now moving inside your element So just a second. So now the key is the position related. Okay, position relative, right, and this is a zero pixel. So now as you can see this is your pixel for this one is I'm saying bottom and now as you can see, it's not leaving the parent there. So that's why so, this is very tricky, and where you use them we will discuss about while working on the project, but for now, you have different type of positions which is static, second is related, third is phase and the fourth is absolute value.

So now, I think this is enough for today. Thank you for watching.