Return Value: It returns a string which represents the position type of the element.

Properties:

static: It is the default property. The appearance of elements in the document remains static in accordance with the document flow.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<h4>DOM Style Position Property</h4>

</div>

<script>

function position() {

// change position from reletive

// to static.

document.getElementById(

"gfg").style.position = "static";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

absolute: It positions the element relative to the first positioned element.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<p>

<h4>DOM Style Position Property</h4></p>

</div>

<script>

function position() {

// Set position from

// reletive to absolute.

document.getElementById(

"gfg").style.position = "absolute";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

fixed: It positions the elements relative to the browser window.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<h4>DOM Style Position Property</h4>

</div>

<script>

function position() {

document.getElementById(

"gfg").style.position = "fixed";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

relative: It positions the elements relative to the normal position, so “right:40” signifies an addition of 40 pixels to the element’s RIGHT position.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<h4>DOM Style Position Property</h4>

</div>

<script>

function position() {

document.getElementById(

"gfg").style.position = "relative";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

sticky: It positions the elements based on the scroll position of the user.The scrolling operation is performed between relative and fixed property values. By default, the scroll position is set at relative value.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<h4>DOM Style Position Property</h4>

</div>

<script>

function position() {

document.getElementById(

"gfg").style.position = "sticky";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

Note:Internet Explore does not support this property value and Apple Safari supports this property from 6.1 version.

initial: It sets the position to it’s default value.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<h4>DOM Style Position Property</h4>

</div>

<script>

function position() {

document.getElementById(

"gfg").style.position = "initial";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

inherit: It inherits the position values of the parent element.Example:

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<h1>

<center>Geeks

<buttononclick="position()">

Press

</button>

</center>

</h1>

<br>

<style>

#gfg {

border: 1px solid black;

background-color: green;

width: 215px;

height: 60px;

position: relative;

top: 100px;

}

</style>

</head>

<body>

<divid="gfg">

<h4>DOM Style Position Property</h4>

</div>

<script>

function position() {

document.getElementById(

"gfg").style.position = "inherit";

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Before clicking on the button:

After clicking on the button:

Browser Support: The browsers supported by DOM position property are listed below:

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.