The Position is one of property of CSS helps us to manipulate the location of an element. There are a total of five values on this property.
Values;
- static
- relative
- absolute
- fixed
- sticky
Syntax
.element{
position : relative; /*it can be relative ,absolute, fixed, sticky */
}
What is position Static in CSS?
By default, the position property for all HTML elements in CSS is set to static.
If we didn't declare any property by default it will be static. Every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.
What is position Relative in CSS?
position: relative works the same way as position: static; , but it lets you change an element's position.
An element’s original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.
What is position absolute in CSS?
The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it. Absolute-positioned elements are completely taken out of the regular flow of the web page. They are not positioned based on their usual place in the document flow but based on the position of their ancestor.
What is position fixed in CSS?
The element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
What is position sticky in CSS?
The element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.