Position
CSS position is a property that defines the positioning of an element in relation to its parent container or the web page as a whole. There are five different values that can be used for the position property: static, sticky, relative, absolute, and fixed.
Static
This is the default value for the position property. Elements with a static position will be positioned according to the normal flow of the document, and they will not be affected by any other CSS positioning properties.
Fixed
Elements with a fixed position will be positioned relative to the web page as a whole, and they will not move when the page is scrolled. The top, right, bottom, and left properties can be used to position the element.
Sticky
Sticky is similar to relative positioning, but it becomes fixed positioning when the element is scrolled past a certain point on the page.
Relative
Elements with a relative position will be positioned relative to their normal position in the document flow. This means that if you set the top, right, bottom, or left properties, the element will be moved away from its original position by the specified amount.
Let's understand Position: Relative; .
In Position: Relative; , the origin is the original position and if you use top, bottom, left or right it will move from its original position not affecting the flow of the document. For example, if used left: 30px; it will move away 30px to the right from its original position.
Absolute
Elements with an absolute position will be positioned relative to their nearest positioned ancestor. If there is no positioned ancestor, the element will be positioned relative to the web page as a whole. The top, right, bottom, and left properties can be used to position the element.
Let's understand Position: Absolute; .
In position: Absolute; , the origin is its first parent and if you use top, bottom, left or right it will move from its parent position affecting the whole flow of the document. For example, if used left: 30px; it will move away 30px to the right from its parent position and it will affect other elements of the document.
