We struggle a lot while positioning elements at the right place on the webpage. Sometimes we also find that top-left-bottom-right has no effect on the element. The position property in CSS controls the positioning of elements on the webpage and its behaviour. It also influences other elements of the webpage.
Sometimes when we are making our webpage responsive we use CSS position property and spend a lot of our time in solving issues in positioning out elements on our website.
Today, we are going to look into the position property and its different values in CSS.
What is Position Property in CSS?
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). By default for every element, the position property is set to static.
There are 5 Positioning Properties in CSS:
- Static
- Absolute
- Relative
- Fixed
- Sticky
Static:
It is the default value of position property. The element is rendered in order of placement. It doesn't break the flow of the document. The top/left/bottom/right attribute doesn't work with the static position property.
Advantage: It will scale on all browsers.
Absolute:
The element is removed from the normal flow of the document. Other elements will behave as it's not even there in the document. All the position property will work. Absolute positioned elements are relative to their parent element.
Advantage: Use when to position element according to parent element.
Relative:
The element is positioned relative to its normal position. It acts as a static element. Now, the top/left/bottom/right attribute will work on the element. It is mostly used for the parent elements.
Advantage: Use for parent element of an absolute positioned element.
Fixed:
The fixed position element is the same as the absolute position. They are removed from the normal flow of the document. But unlike absolute position elements, they are always relative to the HTML tag.
Advantage: Use when you want the header to be fixed on the top of the viewport.
Sticky:
The sticky position is unique. It behaves according to scroll. If you scroll past the element, it will stick to the position. After that, it will work as a fixed element.
Advantage: When you want something to stick after a certain click like Buy Now, Login.
Conclusion:
I hope now you will able to position the element according to your need without much frustration. Thank you are reading the blog post. and I hope not you will be clear about Positioning Properties in CSS