How to use position property in CSS-In a cascading style sheet, position property allows you to control the position of an element. The position property has different values like static, relative, absolute, sticky, and fixed. With the help of these position types, you can make your site more attractive and also unique. In this article, we will learn the various CSS position properties and how they work.
How does position property work in CSS?
In CSS the position property defines the position of an element in a document. This property works with different elements on the page like left, right, top, bottom, and z-index to determine the final position of a component.
There are the most important five values in position a property can take, let’s see how they work.
- Static
- relative
- Absolute
- Sticky
- fixed
Static : position property in CSS
In this property, elements are positioned according to the normal flow of our page. This is the default value of the component. and it does not affect the top, bottom, left, and right. Let’s see the example of how it works,
HTML
CSS
Output
In this example, we notice that the left and bottom properties do not affect the element with the position static.
Relative: position property in CSS
In this property, elements are positioned relative to their normal position. This property is not like the static property you can adjust its position using top, bottom, left, and right. Let’s see the example of Relative position
CSS
Output
Now in this example, the left and bottom properties affect the element’s position.
Absolute: position property in CSS
In this property, an element with a position absolute is position relative to the nearest positioned element. We can also say it can overlap another element. In this property, there is no space created for the element in the page layout. element is positioned relative to its closed-positioned parent class. You can adjust its position using values top, bottom, left, and right.
Now let’s see another example of position absolute in this example we give position absolute to the main element.
CSS
Output
Fixed : position property in CSS
In this property, the element is positioned relative to the browser. It stays always fixed even when we are scrolling. The fixed position elements are mostly the same as the absolute position elements. These elements are not affected by the scrolling they always stay the same position in the scrolling.
Sticky : position property in CSS
In this position, the element is positioned best on the user’s scrolling position; it is between the relative position and fixed position that depends on the scroll position. We can also call it a mixture of the relative and fixed positions; it acts like a relatively positioned element until ascertaining the scroll point; after that, it acts like a fixed element. In this position, an interesting and common use is to create a scrolling index page where different headings are stuck on the top of the page. We have seen the meaning of the navbar, which is pictured on the header of the page.
Summary : position property in CSS
I hope this article helps you understand CSS position property and how it will work. You can change the value as per your comfort and notice the difference for understanding. Use the position property to work on a project and keep practicing.
