What is position Property in CSS?
The position property specifies the location of an element in a document.
Types of positioning methods in CSS.
- Static
- Relative
- Fixed
- Absolute
- Sticky
position: static
The element with static position property will stick to the regular page flow. By default value of the web page is also static.
position: relative
In the relative position property, the static value and the element's initial position both continue to follow the document's natural flow. But now, z-index, top, bottom, and left/right will function. The element is "pushed" in that direction from its initial position by the positional characteristics.
position: absolute
In the absolute position property, an element is removed from the document's flow, other elements will act as if they never existed, but they will still be affected by all of the positional properties (z-index, top, bottom, left, and right)
position: fixed
In actuality, fixed behaves essentially identically to absolute, with the exception that scrolling is unaffected and fixed-positioned components are always relative to the document rather than any specific parent.
position: sticky
When an element has the absolute sticky attribute set, it is first handled as a relative value until the viewport's scroll location hits a predetermined threshold, at which point it assumes a fixed position and is instructed to stick.