CSS Position Property

What does this property do?

It determines how an element is positioned in the document.

offset properties refers to top/right/bottom/left properties
an element's natural position / where an element would naturally be refers to the element without position property defined on it
positioned element refers to an element with display set to anything other than static

Allows use of offset properties.
The offset properties are based on where the element would naturally be.
The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.

Allows use of offset properties.
The offset properties are based on the closest non-static ancestor or the initial viewport. This means that if the body is scrollable the absolute element will not move with the viewport.
Elements around it will treat it as if it doesn't exit.

Allows use of offset properties.
The offset properties are based on the viewport(not the initial viewport) or if any ancestor has transform, perspective or filter set to anything other than none.
Elements around it will treat it as if it doesn't exit.

Allows use of offset properties.
The offset properties are based on nearest ancestor with overflow set to anything other than visible. If it cannot find one, it uses <html> or <body>, check using document.scrollingElement. Another way to think of offset values is it is the minimum gap between the element and the edge of the viewport while the container is in-frame.
The element is also constrained by its closest block level ancestor. i.e. it cannot leave that ancestor.
The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.

Positioned elements all allow the use of offset properties.
Elements around static, relative, sticky elements will treat them as if they are still in their natural positions.
Elements around absolute and fixed elements will treat them as if they don't exist.