Position - Property CSS

position

Summary of characteristics of the `position` property

Quick description

Changes the positioning of an element, for example to make it fixed in relation to the page.

Status

Standard

Usable for

HTML

Predefined values

static | relative | absolute | sticky | fixed

Percentages

Not applicable.

Initial value

static

Inherited by default

No.

Animation type

Discrète : during an animation, the position property passes from one value to another without transition.

W3C Module

CSS Positioned Layout Module

References (W3C)

🡇

🡅

CSS Positioned Layout Module Level 3

Document status: WD (Working Draft)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Syntax diagram of `position`.

Syntax diagram of the position property
The links in the diagram provide access to more details.

Description of the `position` property.

position is one of the most important properties of the CSS language. It determines the logic according to each element to be positioned. Should be positioned on a web page. Should it scroll with the rest of the content? Should it be fixed? And in relation to what (the page, the window)? Etc.

Unless otherwise specified, the elements are positioned by default according to their order of arrival in the HTML file. The first elements encountered are placed at the top of the page and the following ones below. The last element is therefore at the bottom of the page. The position property allows you to choose another logic to calculate the location of an element on the page, regardless of its position in the HTML file, so the element can be found anywhere on the page. This element is called "positioned".

position defines the reference against which the element should be positioned (the page, browser window, and so on). The precise location is then defined by one or more of the following physical properties.

top: the distance between the top edge of the element and the top of the reference object.
right: the distance between the right edge of the element and the right edge of the reference object.
bottom: the distance between the bottom edge of the element and the bottom of the reference object.
left: the distance between the left edge of the element and the left edge of the reference object.

Resolving conflicts on element dimensions.

If both the position of the left and right edges of an element are defined, the width of the element is imposed. But this can conflict with the value given to the width property. Here is how this conflict is resolved. the X indicate the properties that are set for the item.

`left`	`right`	`width`	Horizontal position defined by	Width defined by
X			`left`	auto
	X		`right`	auto
X	X		`left`	computed
X		X	`left`	`width`
	X	X	`right`	`width`
X	X	X	`left`	`width`

A similar problem can arise between the top, bottom and height properties.

`top`	`bottom`	`height`	Vertical Position defined by	Height defined by
X			`top`	auto
	X		`bottom`	auto
X	X		`top`	computed
X		X	`top`	`height`
	X	X	`bottom`	`height`
X	X	X	`top`	`height`

Layering of elements.

Positioned elements can overlap with each other or overlap with unpositioned content on the page. In this case, the z-index property defines the stacking order: which of the elements will be above.

Notes.

Careful! The position property cannot be applied to table columns (col tag), or column groups (colgroup tag).

Language support.

The position property also accepts logical values, which adapt to the way the language is written. It is thus possible to use the following values (with their correspondence in Latin):

inset-block-start — The distance between the edge of the element at the beginning of the blocks and the corresponding edge of the reference object reference. For Latin languages, this is the top (top).
inset-inline-end — The distance between the edge of the element at the end of the lines and the corresponding edge of the reference object. For Latin languages, this is the right edge (right).
inset-block-end — The distance between the edge of the element at the end of the blocks and the corresponding edge of the reference object. For Latin languages, this is the bottom (bottom).
inset-inline-start — The distance between the edge of the element at the beginning of the lines and the corresponding edge of the reference object. For Latin languages, this is the left edge (left).

As well as the following two shorthand properties:

inset-block— The distance between the edges of the element and the edges of the reference object, in the direction of the blocks. For Latin languages, this is the vertical direction.
inset-inline — The distance between the edges of the element and the edges of the reference object, in the direction of the lines. For Latin languages, this is the horizontal direction.

top

left

The direction and writing mode of this text adapt to the chosen language.

right

bottom

Values for `position`.

position: static;

Default. The elements are positioned one after the other, according to their order in the HTML document. The top, right, bottom, and left properties have no effect.
position: absolute;

The positioning of the element is done in relation to the closest parent which is itself positioned, going up in the tree. If there is no other element positioned, the reference will be the body. The exact position, and optionally the dimensions of the element, are defined by the top, right, bottom, and left.
position: fixed;

The element is positioned relative to the viewport. So the element won't scroll with the page. Its position, and optionally its dimensions, are defined by the top, right, bottom and left properties.
position: relative;

The positioning of the element is offset from the position it would normally have had (in static mode). This offset is defined by the top, right, bottom, and left properties. The element scrolls with the page.
position: sticky;

The element scrolls with the page as long as it allows it to remain visible. The top, right, bottom, and left properties serve as a stop. For example top:10px; will block the element 10 pixels from the top of the viewport, while bottom:0; will block the element at the bottom of the viewport.
If top is not set, the element may disappear from the top of the page. If bottom is not set, the element may disappear from the bottom.

Common values:


position: initial  (static)
position: inherit
position: revert
position: revertLayer
position: unset

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Exemple.

A concrete example of sticky positioning is our alphabetical index. It is located on the left side of the screen on a desktop computer (screen with a minimum width of 600 pixels). On a mobile this accessory is not visible.
As you scroll up or down the page, you'll find that this element never goes away.

Animation de la propriété `position`.

Animating the position property position is possible but doesn't have much visual interest. More relevant animation examples can be found on the left , top , and so on property page. or on the equivalent logical properties: inset-block , inset-inline , etc.

Simulator.

The simulator allows you to see what happens when you change the value of the position property of the "Demonstration" block. The dimensions of this element have been defined. It can therefore move around but will not change size.

In the static position (which is the default value for all elements), the "Demo" frame scrolls with the rest of the page.
In absolute position, it is positioned at the very top of the page, on top of the existing content. You'll have to go back to top of the page to see it. Its position is a function of the left and top properties, both of which are set in this example at 10px.
In a fixed position, the frame is positioned in relation to the window and does not scroll.
The relative position simply causes the frame to shift by 10 pixels, in accordance with the left and top always set to 10px.
Finally, in sticky mode, the frame scrolls with the page as long as it remains visible. It freezes at the top or bottom when scrolling would tend to make it disappear.

Demonstration

Prise en charge par les navigateurs (compatibilité).

The position property is very well supported by all browsers, including the newer sticky value in the specifications.

Column 1

Support for the position property allowing an element to be positioned anywhere on the page.

Column 2

Support for sticky value in the syntax of the position property.

Notes:

(1) Support for th, but not thead or tr.

position
property

sticky
value

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`position` property historic.

Cascading Style Sheets Level 2 - Revision 1 Specification

ntroduction of the position property in the CSS language specification, version 2.
The following values are accepted: static, relative, absolute and fixed.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Positioned Layout Module Level 3

Adding sticky value for position property.

February 07, 2012
Working Draft.

Voir aussi, à propos du positionnement.

Properties related to positioning (different from static) are grouped in the CSS Positioned Layout Module module. The following properties are also described in this same module: