1. Static
The default position; the element will be positioned according to the normal flow of the document.
2. Relative
The element will be positioned relative to its normal position, with left and top properties specifying the offset from that position.
3. Absolute
The element will be positioned absolutely, with respect to the nearest positioned ancestor (i.e., the nearest ancestor that is not static). If there is no such ancestor, it will be positioned relative to the document's body.
4. Fixed
The element will be positioned fixed with respect to the viewport, meaning it will stay in the same place even if the page is scrolled.
5. Sticky
The element will be positioned according to the normal flow of the document, but will stick to its nearest ancestor that has a non-static position once that ancestor reaches a certain scroll position.
6. Initial
Sets this property to its default value.
7. Inherit
Inherits this property from its parent element
CSS Coding
CSS Position Explained
This blog article explains the CSS position property, covering static, sticky, relative, absolute, and fixed positioning. Learn how to position elements on a webpage in order to create advanced layouts.