Introduction
We struggle a lot while positioning elements in the right place on the webpage. Sometimes we also find that top/left/bottom/right has no effect on the element. The position property of CSS controls the positioning of elements on the webpage and their behavior. It also influences other elements of the webpage.
Position property ca
Today, we are going to look into the position property and its different values in CSS.
Position in CSS Property
The position property specifies the type of positioning method used for an element.
–W3Schools
It defines the position of an element in the document. The element is positioned top, left, bottom and right according to the properties defined. They worked differently with a different values. Sometimes they depend on the parent element’s position for the positioning of the element. While they work independently.
Position property defined the type of position to use as value. There are 5 major key values of the position property
- Static
- Absolute
- Relative
- Fixed
- Sticky
Static
An element with
W3Schoolposition: static;is not positioned in any special way; it is always positioned according to the normal flow of the page
It is the default value of the position property. The element is rendered in order of placement. It doesn’t break the flow of the document. top/left/bottom/right attributes don’t work with static position property.
Why use: It will scale on all browser
Absolute
An element with
W3Schoolposition: absolute;is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
The element is removed from the normal flow of the document. Other elements will behave as if it’s not even there in the document. All the position property will work. Absolute positioned elements are relative to their parent element.
Why use: Use when to position element according to the parent element
Relative
An element with
W3Schoolposition: relative;is positioned relative to its normal position.
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.
Why use: Use for parent element of an absolute positioned element
Fixed
An element with
W3Schoolposition: fixed;is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
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.
Why use: Use when you want the header to be fixed on the top of the viewport.
Sticky
An element with
W3Schoolposition: sticky;is positioned based on the user’s scroll position.
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.
Click here for the live-action of the sticky position property.
Why use: When you want something to stick after a certain click like Buy Now, Log in.
Conclusion
I hope now you will be able to position the element according to your need without much frustration. Thank you are reading the blog post.
GIF Credit: FROONT BLOG
