CSS - Position Property
Table of Contents
1 - About
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.
2 - Articles Related
3 - Type of positioning scheme
Type of positioning scheme according to the parent and child position value:
Container Position | Child Position | Description |
---|---|---|
static | static | Static > Static: Normal Flow |
static | relative | Static > Relative: Relative Positioning |
static / relative | absolute | (Static|Relative) > Absolute: Absolute |
4 - Usage
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.
5 - Position works with all type of box
5.1 - Flex
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>