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





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: * from the first ascending box...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
Boxdim
CSS - Container Box (Containing)

A container is a box that contains other box Many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. See also: Container block In general,...
CSS - Float (box|property) (Layout)

CSS Float is a property of a block box. It shifts a box to the left or right on the current line and create a new position context. flexbox The most interesting characteristic of a float (or “floated”...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
CSS - Position - Offset Properties (Left, Right, Top, Bottom)

The Offset CSS Properties of a box are top, left, right, bottom They are applied to the containing box in the following positioning model in order to position a box. relative absolute...
CSS - Right Property

The right property is the offset from the right edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticrightnormal flow positioning model ...
CSS - Sticky positioning (Pinning)

Sticky is a positioning option that: keeps the box in view (ie in the viewport)) within its containing block as the user scrolls. From a logical point of view, the element is treated: first...
CSS - The containing box

The containing box is a box that is used in the positioning of element on the page



Share this page:
Follow us:
Task Runner