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

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

Properties

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

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>

Documentation / Reference


Powered by ComboStrap