Position Property in CSS

Hello guys! Welcome to our series, CSS. In our last segment we had seen about positions of CSS. I hope you have practiced what we had performed in the last segment. If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to rectify your issues at the earliest and revert to you. Our today’s segment is on CSS Position Property. We had conducted one more segment on the position property which shows about CSS float positioning. Which comes in use only when we have to fix any element left or right. The position property that we are going to use today or see today is…that will show how on the web page and in which way we can fix it, it will show us that. So, it is not bound by left or right but in the entire web page layout, in which way we can position our elements. That is what our today’s segment will explain to us. So, 1^st of all about CSS positioning is, the CSS position property is used to set position for an element. Means in which position we want to set which element, that is provided by this CSS property. It is also used to place an element behind another and also useful for scripted animation effects. Means let’s say that we have 2 elements. One element is visible to us and one we have to place exactly behind it, in such a way that both the elements look in such a way to us. the 2nd element’s some portion gets cut off, the 1st element comes over it and the 2^nd element should be cut in half. In this way or in any such method we have to place the elements. So, for that we can use our positioning property. 2^nd, when we wish to perform an animation on our webpage, at that time positioning property is very useful. You can position an element using the top, bottom, left and right properties. When we want to give position to any element, we can make use of these 4 things. Top, bottom, left, right properties. With the help of these properties, when we want to give positioning property to any element. So, with the help of these 4 properties, here are the 4 positioning properties that are given like relative, absolute, fixed and sticky. These we can define or provide the elements. Like the name suggesting CSS positioning, a total of 4 types are available. Static, fixed, relative and absolute. We will see one by one about all 4 properties. The 1^st one is CSS Static Positioning, which is also a default positioning of our web page. This is by default position for HTML elements. It always positions an element according to the normal flow of the page. Means when we display any element without any position property in our webpage, at that time the default position property that is added. That is our CSS’s Static Position Property. If we want to apply top, bottom, left or right properties. Even then it doesn’t get affected. This kind of position is called static. If we see one practical example of it. Let’s say we will perform a practical of it. HTML, “Example Static Positioning''. We will save it, position static.html. For example, we have to position or content statically.  For that we have an image here. We have an image here, which we saw in yesterday's segment. In which the patterns are made. In our filter segment we had used this property and this image. There is one more image, a logo of Learnvern. We will use both the image and check the position property that is applicable on different images. So, 1^st of all in our program, we will add an image. So, let’s say my 1^st image is the one with patterns. So, this is our program. We will have to give size to our image because the image is quite big. So, let’s say I take width, 250 and reload. So, our image came here with 250 widths. Now we have to add one more thing. We have not added any positioning property here. So, by default the image goes and sets in the left most corner. So, let’s say I add another image, images. And another image’s name is Learnvern. (Pause) Save, reload. Okay. So here is our image… We have not applied any positioning property here. We have simply placed 2 images here. So, by not even giving the positioning property, the default positioning property that gets applied is static property. So currently both the images are applied with static property on our webpage. If I give both these images a static property. So, let’s say I take style, body and in that…we can do this work without the body. Let’s say we take an image and give it position, static. We will save it and I am reloading it. In my image there is no difference that is coming, which indicates, static positioning means next to every element we are adding another element. When the screen width gets over, other elements start from below it. So, static positioning is such a positioning property which we don’t add, even then by default it adds in our element. So, when we generate a web page and one below the other the contents get added. Those properties also without defining are static positioning. We will go ahead to the next property, CSS fixed property. Fixed positioning means whichever element we have given fixed positioning, that remains fixed on that particular position. It does not move from there. So, let’s say we have generated a very long web page and we have given any of the elements fixed property. So, that element stays there and it is not going to move from there even though we scroll and go down. Let’s say for fixed property we generate one more program here “Example fixed property”. For fixed property, (Pause) position fixed. This is our program. Now in this we have taken an image. Let’s say we give a class to our image “image pattern”. We are giving the pattern image a class. And the other image we give class “image fixed”. The image fixed image that is there, we will capture it with the image fixed. We will give this fixed; it means that the 2^nd image, the pattern image, will come with static position. First, we will save the program and run it. This is our fixed program. Okay. We can see that there is one image here and another here. Now the Learnvern image to which I have given fixed property, it should be set in one corner. I will give it right-0 and top- 30pixels. Here what is happening is after giving right 0, my image is going to the right most corner and I have given top 30, which means my image is coming from top at a 30 pixels distance. Now I want a scroll bar here. So, let’s say I am copying the image multiple times. Okay. So, it came here thrice. After that next to the image, I will add the br tag. So that my image comes down. So, you can see that my image is coming down. So, here I am getting a scroll bar. As I am using the scroll bar, here my image which is with a static position is now going up and down. But my image is there on the right-hand side, it has got stuck in a fixed position. We can see this. No matter how much content we add on our webpage. This image, which is a Learnvern logo, will not move from here. That means when we want to fix any image or element in our web page, no matter how big the webpage is. That particular element should show on a particular web page. So, in that case we can use position fixed like property. Navigation bar is also an example of position fixed. If we want to make such a website that the navigation bar that is there on the top should always be visible, it should never move from there. In that case we can give the position fixed to the navigation bar. We can fix on a particular top most position. So, this was our positioning fixed example. Next is CSS Relative Positioning. Relative Positioning means it has been shown here. It is used to set the element relative to its normal position. Means in any way apart from normal position we have to set the element. So, we make use of relative. Even if we see with an example, it will be clearer. So, let’s say the 1^st static example that was there, I copy and paste it here “Example Relative Positioning”. And we have both the images here.  We will save it, position relative. Okay. This is our program; at the initial level we will see them both statically. Now what we will do is. Any one image or both the images we will give relative. And here I will use the br tag. Save and reload. So, what is happening here is that after giving relative my image is there in the same position as it was there before. Because of br the other image is coming down. This is our default nature of element. When we have not given any property at that time it is visible in our left most corner and because of the br, our other image is coming down. Since we have given relative, we can add properties like, left, right, top and bottom. So, let’s say that the 1^st image I want is at a distance. Distance means a little distance from the top, from the right, from bottom or distance from left. In that case we will give the class to the image “image pattern”. Same class we will give to the other image, “image logo”. Image pattern which is there for us. We have given a relative, now we want that it should be at a distance from top. I will take the top, then 10 pixels, from the left I will take 100 pixels, we are not giving right as from left how much it will move, we will not see that much movement from the right, bottom we will not give now, we will give it later. We will see these 2 results. What happens on giving top and left. So, here I will ignore it. So, my image from top 10 pixels, means at a distance of 10 pixels and from left if is moving at 100 pixels distance. Let’s say, even if I give it the bottom. Mostly we will not be able to see it. If I give it 500 pixels. So, you can see that I am not getting it. As from down there is more than 500 pixels of space that is occupied. Same way if I give right here, how many pixels I define in it. We will not be able to see right as there is the distance from here. From here the distance is 500 pixels so it will not be visible. But from here, we provide more than this distance, then it will be visible. If we want to move the image here, for that we can give right 0. So, currently we have given relative position so we can add, left, bottom and right like properties. I have removed useless properties. If I want to move the image logo in some other place. So, let’s say I will give a position. Let’s say I want to move this image to the right-hand side. So, for that I will take the right 0 and bottom 0. So, my image that is there, image logo saved. So, here it is not moving. So, we will have to make some changes here. So, you can see that when we have taken right and bottom 0, there is no difference in our image at that time. Reason is that, on the right side we have taken 0 pixels, so on the right side it will properly remain 0. If we give more distance, then our image will move. If I give it float right then my image will move from here and come here. Same way in the bottom also, if I give distance more than 0, then it will not move. So, let’s say if I define left 500 pixels. So, my image is moving ang coming at left 500 pixels distance. And if I am giving 1500 distance, then my image is coming here with the scroll bar. So, let’s say I give 290. Okay. So, my image is coming here. I will reduce it further. Let’s say I take 1200. Okay. So, my image is almost coming on the right hand side. If from right if I give 50 pixels. So, you can see that the image is not moving. The left is overwriting the right. If I take 1150px here, So, now you can see that my image is at a distance of 1150 from here and from here, it is showing at a 50 pixels distance. So, here we have even given the right, if we decide or define the bottom also in the same way. Then we can give the bottom property. So, we have seen here relative’s meaning as when we have to give the element position like top, left, bottom or right. We can give it to it only when it is in a relative position. We can give it a relative and move it to our webpage. Next is our CSS, absolute positioning property. Absolute means that element relative to the 1^st parent element that has a position other than static. It means that when we give something an absolute position. The element with absolute position, its parent element whichever is there, its position is defined relative to it. For example, inside a division, relative to this image. I would like to place this Learnvern image or I would like to give the position on my webpage. So, I will have to give any one a relative and the other absolute. Any element that you want to give a position. We have to normally give it an absolute position. If we have not defined any parent element, then our body tag comes in default relative position. If we perform this scenario practically, it will be easier for us to understand. I am copying the same program over here. “Example Absolute ''. Save, position absolute.html. This is our program; from this we will remove our relative positions or we will remove the entire style. We will currently remove our 1^st image as well. So, we are getting only 1 image, our Learnvern logo. Now we will give our Learnvern logo an absolute position. Our class is our image logo, position, absolute, save. Okay. Now we will give spacing inside it. If I give right 0. So, you can see that our image has gone to the right hand side. When we wanted to perform the same thing with relative position. At that time this thing didn’t happen because in relative, 0 was not getting applicable from the right. As soon as I gave my image logo, right, 0, then my image was set on the right hand side in 0 position. It means it moved from here and came here. Like we get a result in float right, same result we are getting from absolute. So, now we have taken the image as absolute. Out of this image, the logo of Leanvern, it has come to absolute position relative to which div or which element. If we don’t have any parent class available, so in that case our image considers body tag our relative. So, my image, in the consideration of the body tag’s relative position, it is setting on absolute consideration, it means on the right 0. If I consider my image pattern as relative pattern, position, relative. We will save and reload it. Now what is happening, even now our image that is there, this and that is independent because this pattern image is not it’s parent. If I want to make it it’s parent. So, what I will do, I will take a div, class, image relative, we will give position relative. Now we will move both these images inside this. Save and reload. Now what we are getting is our div that is there, so all our div will be considered as we have not defined height and width. We have just taken a division with the name relative. We have put 2 images in it. Now to this image, or the division that is there, image relative, I will give it width, let’s say 500 pixels. As soon as I gave my division 500 pixels width. My image’s size becomes this much, let’s say I even give it background color, so that it gets clearer. Okay. So, this is our division, the background is defined light green, that much is our division. In division I have taken my image. Here you can see that with the width of 500 pixels I have defined my division. And I have not given my height and after that I have taken 2 images here. For example, I comment on it. We will not get anything because there is nothing in it. I will comment on this as well. Okay. So, how is the height of my division defined? The content that is there inside. What is the content in my division? This pattern picture. My division’s height would be the same as the pattern picture’s height. Now my image that I have made is absolute. Why is it going out? Because my logo, which is there of Learnvern, is in the absolute position and it will set its position with respect to this light green division which is set as relative position. So, my whichever division or my whichever element, to whom we must have given relative position. The position that I have to set as an absolute position. That is inside it, so it will set a respective position. So, currently I have given my logo right 0, so they are set here. If in this place I will do left 0. So, my image will come on 0, on the left side. If I would like to set the image somewhere up. So, what I will do for it is I will give the bottom 15 pixels. So, you can see that my image has come to the upper side. Means from below at a 15 pixels distance. So, my image is inside my division with the bottom because we have given some spacing from the bottom. If I want, I can give the spacing in minus. For example, right 0, bottom, 15px, from right, -10px space. So, from the bottom 15 pixels distance and this on the right-hand side, in minus. the 0th line which is there of my absolute division, it is going outside of it. We will increase it a little more. We will take 20. You can see that it is going out by 20 pixels. So, here is the Learnvern logo that we have with respect to the division if we are setting. So, for that we have to make use of the absolute. So, to make use of position absolute. We would be needing a minimum  one parent div, which is position relative. If any parent division of elements is not defined. In that case our body tag performs as a parent. This was our absolute positioning. Now comes our new positioning property. Which is in the CSS named as sticky. The difference between stick and sticky is that sticky is such a positioning method which works between absolute and relative. Like it is written here. The CSS position property is used to set the position for an element. It is also used to place an item behind another element and also useful for the scripted animation effect. If we have to show any element behind any element at that time also sticky is used or if we want to perform any animation. At that time as well, position sticky is used. Normally the sticky position behaves on the scroll. So, if we want to add any scroll event or effect. At that time, we can use sticky. This CSS property allows the elements to stick when the scroll reaches a certain point. Means when our scroll comes to a certain point. Making the element stick there, we can make use of sticky. Depends upon the scroll position, a sticky element toggles in between fixed and relative. The toggle is between fixed or relative. Initially it will be fixed in one place. After that its position changes and becomes relative. The element will be positioned relative until the specified position of offset is met. We will compulsorily need a scroll bar for it. In a big web page, we would need a little design, a little bit of content, so that we can achieve sticky. So, to go from one place to another. From a fixed position we have to go to a particular position, only then this position will stick. Initially our position will be fixed and after that it will be relative and it will stick. We will perform it with an example. Here we have been given an example. In this we have taken a sticky position. Before the top we have taken 50 distance after that when the scroll is performed how it sticks, that we are going to see. So, let’s say we will generate a program for it. (Pause) HTML, example, sticky positioning. Okay. Save. Inside sticky now we will take a header. For example, let’s say we will first of all take p “This is a p tag”. We will take 3 p tags like these. We will add it in the style, p. Now, let’s say we will give margin to p, we want a little long page for this. Margin, 10px. Margin from every direction and we will keep as it is. Then we will take a heading tag, h1 “This is a sticky heading tag”. To this h1, we will give background color, orange, font size, 20pixels and padding 20 pixels. We will save it and run this program. So, this is our program. This is a p tag, p tag, p tag. Then this is our heading. Okay. We have this p, we will add a few br tags, (Pause) save. Okay. This same thing we will perform again here. Okay. You can see here that the scroll bar is also coming, here our header is coming. We will repeat this again. Okay. So, this is our scroll bar. This is our header. We will remove this and place it over here. Okay, so this is our header and there are a lot of p tags. When we are scrolling our header is going up means it is going out of our viewport. Now, we will add our sticky property here. For that 1^st of all in our h1 we will add the position sticky. From the top where we have to add, let’s say from the top 50 pixels I have to stick it, padding we have already given. Font size we have given, background color we have given. So, we have 2 options, position sticky and top 50. For just a proper view. We will give it a border. 1-pixel, solid blue color one. Okay, so this has come. So, when I add, at that time this portion, heading tag, should stick here. So, I am scrolling it and you can see that my scroll is continuously happening but my header sticks. From where? From top at a 50 distance. Even then my other content is scrolling in the background. Then when I go up again and my specified position comes, after 4 p tags. In our program as well, after 4 p tags we have defined this h1. So, what happens here, when I scroll this, then on the defined top 50 position my header sticks and the rest of the content is still scrolling. But when I go up again, while coming to its defined position, it behaves normally. First it behaves statically but when I take it to a defined position. At that time, it behaves fixed. So, this is a sticky position. We can even add something like an animation in our program. You can see how smoothly the content behind is scrolling and my header is sticking here. If I define the top as 0. So, mine will stick up. When? As soon as it touches the top. By giving such a sticky 0, we can even create a navigation bar. There are some websites which are designed this way, where the navigation bar is somewhere else which means there is a particular distance. But when we scroll it, it goes on the top and gets stick. So, this is a sticky position property. This works between relative and fixed. So, these are all our positioning properties that we have seen today. Starting from static, fixed, relative, absolute and at the end we saw sticky. These 5 properties that are there of positioning. I request you guys, whichever practical we saw, you try it on your own. With these positioning properties, we can bring a lot of activeness on the web page. We can add a proper look and feel. And we can even add animation. So, I request that you try it’s practical.If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to rectify your issues at the earliest and revert to you.  In our next segment we will see about CSS’s position property. How we can give positions to different elements of CSS.