Style position Property

Definition and Usage

position Sets or returns the type of positioning method used for the element (static, relative, absolute, or fixed).

See also:

CSS Tutorial:CSS Positioning

CSS Reference Manual:position attribute

Example

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"

Property Value

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

The element is positioned relative to its normal position.

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

The element is 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 positioning of the element.
CSS Version: CSS2

Browser Support

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