In the session, let us know how the HTML elements are positioned in documents. For positioning the HTML elements, you need to use the position property of CSS. This position properties take any of these four values, static, relative absolute and success. Once you've assigned value for the position property, the elements can be positioned using these four properties, top bottom, left and right, because one day one, let me first start with static positioning. Static positioning is the default positioning model of HTML elements. The HTML elements are positioned as for the flow of the document.

Say for example, if you have got few elements within the body that these elements will be positioned, as per the documents, whatever in whichever way you have added the day. obey the rules of up they don't obey these four properties top bottom left and right. Let us see an example for the static position. I am created HTML page with three developments. These three developments have got the class attribute and the ID attribute using the class attribute, I have given width, height, background color and the font color. Let me first run this you can see the output because these developments take the whole width of the container they are positioned next to each other.

This is actually the static positioning. Let me make some changes. Now, I want these three developments in a single line. So I need to go in for the display property. Let me add the display property. Display colon inline block.

Now in this case, the elements will be added next to each other. Let me save this and refresh browser you can see the output now the elements are arranged next to each other this is done. Now, what I will do is I will try to change the styling of this second as I do, because having IDs to let me do that hash to four First I will change the background color Okay, then, let me add the position property. Already I have told you that the default positioning model is static. Even if you don't give this position property the elements will be arranged as for the flow of the document. I want to show you the difference.

So, I have added this position property Let me ask that the top and left property so, top hundred pixels left 140 pixels. Let me save this let me refresh the browser Do you see any change only the background colors change the top and bottom in left properties doesn't have any effects because this is static positioning. Next, let us try to understand the relative positioning model. relative positioning you are supposed to give value for the top left bottom and right properties, the element will more related to that normal positioning. Let me explain you with an example. I am working on the same example.

Let me open this browser and Sublime Text side by side. Now, I have got it, I'm going to change the position from static to the letter. Now, we'll change it to relate to let me refresh this. You can see the output Acting as happens, the animal has more related to it normal positioning, let me explain static position the element is supposed to sit over here. But now we are given the position as related, we are given from top hundred pixels from left 140 pixels. So, from left from this position it is looking in for 140 pixels, you know the size of the top which says hundred pixels high 200 pixels.

So, this this hundred pixels plus this 140 pixels from Mexico regional position it has more 140 pixels. Same way from the top you have given hundred pixels. So this is the top part it is supposed to sit here from the top it is pushed down 100 pixels. So, relative means relative to its normal position. Let me also show it from the browser. So, this is the browser.

Let me run Click inspect. Let me select element. Now let me open this body part I need to go in for this second do I want to analyze the CSS part? So the CSS I'll come over here you can see portions relate to Now, let me uncheck this position. See, now the position a static site is going and sitting there automatically. Again I will check this I will uncheck stop it means from top it is only zero.

Can you see this one leave left the shot from left 140 pixels left mean to let them to its original position say this 140 pixels. Now I will uncheck left and check top. Can you see the difference? I hope it is clear static means after the flow of the documents relate domains letter to its original position. Next, let us talk about absolute positioning. absolute position.

The element is taken out of the flow of the document, all the elements are positioned assets, this particular element doesn't exist. So the space for this particular element will not be seen or will not be shown. And if you're going to give values for top right left bottom properties, in that scenario, the element will be positioned relative to its ancestor. If this bill is sitting in phase, any other element that is the parent, it will consider the answer step and related to that this particular element will be pushing this element I'll follow scrolling, you can scroll when you do scrolling, the element will walk or bow down. If there are ancestors, it will be positioned relative to this HTML document. In our case, we are adding three elements directly inside the body part.

So the parent of this business body tag and ancestor for this particular device HTML element. So if I'm going to provide values for top and left property, automatically they will be positioned relative to the HTML document. Let us see an example for this. I am working on the same file, let me change the value from related to absolute. Let me save this, I'm not going to refresh the browser. Let me open it in a new tab, right click open in browser.

Now you see the output. This is the output for relative in case of Neto, the strength of the HTML element is still preserved. In case of absolute The space is not reserved, meaning to say that the other elements are positioned at this particular element doesn't exist in our case two doesn't exist. Now, let us discuss about the values where exactly the Diversity let me just open right click inspect element that we open it all the freedoms are sitting inside body tags. So, body is the parent of this div tag and HTML is the parent of the body tag when you are trying to do pop and left for this element which is positioned as absolute they are metal to the ancestor. So, it is going to be a letter to the HTML element.

Let us see you know what the service This is hundred pixels and what is this 40 pixels. So, it does letter to the HTML document. You can see from the top we have given hundred pixels, it has to be next to the red line right it has to be next to the spot. This part but what it is doing it is just above that part, right. It has a letter to the HTML document. Let me show you here.

Let me just take the CSS of body part See the Witcher 383 diet is only hundred pixels. So it does not question to the NATO body, it is physician letter to HTML document. Let me select the HTML you can see the CSS of HTML, HTML is having the witness for 399 and the height is 116 pixels on the top eight pixels on the bottom that is 16. So this is hundred eight on top eight on bottom. So now what happens this element is position letter to the HTML document. That is why when you do hundred, this Yay, plus 90 so put together 100 database shifted little up.

So when you say absolute you when you're giving value for top left, right bottom property, it will go and set letter to the ancestor. Next, Dobbin elements will be She should add to this particular element doesn't exist. If you want to check how exactly these elements are positioned, you can just select f1 or right click inspect, select the element for which you want to check the positioning. In our case, it's a second element. So here if I remove this position absolute, automatically we go to the static positioning. So you have to check this by positioning your elements.

So this is absolute. The next one is in case of pixel positioning, the element is fixed to the container. Even if your web page is scrolling, the element will be in the fixed place only it will not move. Now, let us see an example of using this exact positioning. I'm not going to work on the same example, I have created a new HTML page. This has gotta do with two Child Tax one paragraph and one That test let me run this.

Right click open in browser. You can see the output only the paragraph is shown that don't have this not shown white because we have not given any value inside the div tag. Let me try to do some styling for this div that say this dot box. Let me give width and height with the 60 pixels height of 60 pixels and background color as blue Okay, now let me refresh this. You can see the output the elements are positioned after the flow of the document because this is static. Now what I wanted I want to do height and width for my outer do.

Let me do that here. dot outer for this let me give with colon 150 pixels height colon 150 pixels let me save this let me refresh, you can see the output what has happened, I have given with this one to see success. So, this is fine, what about the height it is going out of the way the height is more than what I have given let us take this out, let me give a background color as green save it refresh, can you see the videos only till this part the height is only till this part, but still it is overflowing out of the container because I am using a paragraph. So what I can do is I can go in for a scroll bar. I don't want to go out of the container. So let me add that What slow scroll?

If that is overflow out of the container, don't make it overflow better add a scroll bar. So let me save this again refresh. Now can you see the scroll bar? And what about the div? The development also is scrolling. Can you see what is the position of this particular div?

This is static. We have not done anything it is static, it is going to this lofty document. Now what I want us I don't want the text and the dude next to each other, I want to push the text to be saved. So let me add some padding. So I just left the padding or sorry padding left. Let me return 100 pixels.

Let me save this let me refresh. Now you can see the text is pushed to the left or sorry pushed to the right, because from the left I have given padding 100 pixels. from year to year it has hundred pixels. Let me scroll down, you can see the div tag better the child and the child paragraph they are scrolling, because we are given overflow scroll. Now, let us go and change the position of this particular do let us view the positioner success. So, I have to go here right this is the position fixer, let me do from top 20 pixels from left 20 pixels Can you see now, what I have done is I am changing the position of this initially it is having a static version going with the flow of the document.

Now I am giving fixes. So, what happened? Let me save this. I will come here I will refresh. Now what happens from top 20 pixels from left 20 pixels and the position fix it. It is fixed to the flow, I mean it is fixed to the viewport of the container.

Now let me try scrolling. The web page is scrolling whatever the deal is not scrolling, because you're given the position of success. If you are changing it to start it, it will scroll because it is asked for the flow of documents. If you are changing it to letter again it will scroll let me come here I will change it to static static already we have seen but still I am changing it to static. Let me refresh. Static means after the floor so it will go down.

Can you see it is still there. Now, I will change the story a little later to its normal position that it is supposed to sit here but some years you have given left 20 some top 20 so accordingly it will change. Let me refresh. Now I'll scroll it up. See a small little 20 left from top 20 Okay, then again let me change this to absolute absolute now what is an SR for this bill for this bill the parent of this development the ancestor of this body for letter to the body 20 pixels left 20 pixels top. So, let me refresh you can see from the body tag 20 pixels left 20 pixels stuff because body sans SR for this particular div.

Now, what about scrolling? It will scroll it is close together with the document because of this absolute positioning. Let me go in for the last one fix it. Refresh, this is fixer positioning which should mean to this fixer to the container. It will not scroll together with a document. You can see this it does not scroll To the dividend of producing the width and height of the of the outer div you cannot see that scrolling only the document will scroll.

So what we are seeing is how the elements are getting positioned in the document using this position property. Static in case of static elements will be positioned as for the flow of the document relate to the element will be positioned relative to its normal positioning, then absolute, the element will be positioned letter to its ancestor in K. In this case, the elements also will be scrolled together with the web page. The last one is fix that the elements will be positioned fixed to the viewport, it will not go even if the web page scrolls because it is fixed to the viewport it stays in the same place. So with the help of this, you can position your elements very easily in a container. The best part is you can just inspect and change The positioning as per your requirement.