CSS - Position Property

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

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 parent and child position value:

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

where:

• static (default): The box is a normal box, laid out according to the normal flow. The top, right, bottom, and left properties do not apply. An element is said to be not positioned if its position property has the value 'static'
• relative: The box's position is calculated according to the normal flow. Plus, the 'top', 'right', 'bottom', and 'left' properties apply.
• absolute: The box is taken out of the normal flow. The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
• fixed: According to the 'absolute' model, the box is taken out of the normal flow but does not move when scrolled. The box's position is specified with the 'top', 'right', 'bottom', and 'left' properties.
• 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:

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

<div class="parent">
  <div class="child">text</div>
</div>

• position