Position
The position property sets how an element is positioned in a document. The top, right, bottom, and left (and z-index) properties determine the final location of positioned elements.
The containing block is the element in which its positioned children are lives. By default the initial containing block is the html element which is the root element.
# Relative
This will position the element relative to its current position using the helpers properties.
The relative positioning will not follow the containing block, but will only offset from its static position.
# Absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the html element.
The absolute positioning will follow the containing block, which is the first parent with position other than static.
# Fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property, in which case that ancestor behaves as the containing block.
Note: scrolling inside the containing block won't affect the fixed element.
# Sticky
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.