CSS - Position Property
Table of Contents
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.
Articles Related
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>