Attribut de position de style

Définition et utilisation

position Définir et retourner le type de méthode de positionnement de l'élément (statique, relative, absolue ou fixe) pour la configuration des attributs.

Veuillez également consulter :

Tutoriel CSS :Positionnement CSS

Manuel de référence CSS :Position attribute

Instance

Example 1

Change the positioning of the <div> element from relative to absolute :

document.getElementById("myDIV").style.position = "absolute";

Try it yourself

Example 2

Use different positioning types :

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Try it yourself

Example 3

Returns the positioning of the <h2> element :

alert(document.getElementById("myH2").style.position);

Try it yourself

Syntax

Return the position attribute :

object.style.position

Set the position attribute :

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Attribute value

Value Description
static Elements are presented in the order they appear in the document flow. Default.
absolute Elements are positioned relative to their first positioned (non-static) ancestor element.
fixed Elements are positioned relative to the browser window.
relative

Elements are positioned relative to their normal position.

Therefore "left:20" increases the left position of the element by 20 pixels.

sticky

Elements are positioned based on the user's scroll position.

Sticky elements switch between relative and fixed based on the scroll position.

It is relatively positioned until it encounters the given offset position in the viewport - then it "sticks" to the appropriate position (such as position:fixed).

Note :Not supported in IE/Edge 15 or earlier versions. Safari started supporting the Webkit prefix from version 6.1.

initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value : static
Return value : A string representing the type of element position.
CSS version : CSS2

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support