CSS - Position Property

About

The position property specifies the positioning algorithms (positioning scheme) for elements.

To understand how a box is positioned, see CSS - (Box) Positioning (Scheme)

The position is calculated with respect to the edges of a rectangular box called the containing block.

If a child box is not confined by its containing block; it may overflow.

The top, right, bottom, and left properties specifies the position of the element.

Type of positioning scheme according to the ancestor (container box) and the descendant box position value:

Container Constraint	Descendant Position Value (child, child of child,…)	Description
Static container	static	Static > Static: Normal Flow
Static or relative container	relative	Static > Relative: Relative Positioning
First relative container or viewport	absolute	(Static\|Relative) > Absolute: Absolute

Values static | relative | absolute | fixed | sticky | inherit
Initial value 	static
Applies to 	All elements
Inherited 	No

Values table:

Values	Default	Positioned	top, right, bottom, left applies ?	Model	Description
static	x	No	No	normal flow	The element is not positioned. The box position is calculated according the normal flow
relative		Yes	Yes (Position)	normal flow	The box's position is calculated according to the normal flow and shifted relative to this position with the offset properties (top, right, bottom, left)
absolute		Yes	Yes (Position and size)	absolute	The box is taken out of the normal flow and is positioned according to the first relative ascendant container or the viewport if none. Their dimensions cannot alter the dimensions of their ancestors.
fixed		Yes	Yes (Position)	absolute	According to the 'absolute' model, the box is taken out of the normal flow but does not move when scrolled.
sticky		Yes	Yes	sticky	keep the box in view within its containing block as the user scrolls.
inherit					Takes the same specified value as the property for the element's parent.

Position works with all type of box. Example with a flex box:

.middle {
   display: flex;
   position: absolute;
   top:10px;
   left: 50%;
 }

<div class="middle">text</div>

When writing a UI interface, the CSS position terms:

You can use: