HTML | DOM Style position Property
The position property sets or returns the type of positioning method used by the element. It may be static, relative, absolute or fixed.
Syntax:
- Return position syntax:
object.style.position
- Set position syntax:
object.style.position = "static | absolute | fixed | relative | sticky | initial | inherit"
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:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
h4
>DOM Style Position Property</
h4
>
</
div
>
<
script
>
function position() {
// change position from relative
// to static.
document.getElementById(
"gfg").style.position = "static";
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking on the button:
- After clicking on the button:
- Before clicking on the button:
- absolute: It positions the element relative to the first positioned element.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
p
>
<
h4
>DOM Style Position Property</
h4
></
p
>
</
div
>
<
script
>
function position() {
// Set position from
// relative to absolute.
document.getElementById(
"gfg").style.position = "absolute";
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking on the button:
- After clicking on the button:
- Before clicking on the button:
- fixed: It positions the elements relative to the browser window.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
h4
>DOM Style Position Property</
h4
>
</
div
>
<
script
>
function position() {
document.getElementById(
"gfg").style.position = "fixed";
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking on the button:
- After clicking on the button:
- Before 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:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
h4
>DOM Style Position Property</
h4
>
</
div
>
<
script
>
function position() {
document.getElementById(
"gfg").style.position = "relative";
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking on the button:
- After clicking on the button:
- Before 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:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
h4
>DOM Style Position Property</
h4
>
</
div
>
<
script
>
function position() {
document.getElementById(
"gfg").style.position = "sticky";
}
</
script
>
</
body
>
</
html
>
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.
- Before clicking on the button:
- initial: It sets the position to it’s default value.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
h4
>DOM Style Position Property</
h4
>
</
div
>
<
script
>
function position() {
document.getElementById(
"gfg").style.position = "initial";
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking on the button:
- After clicking on the button:
- Before clicking on the button:
- inherit: It inherits the position values of the parent element.
Example:<!DOCTYPE html>
<
html
>
<
head
>
<
h1
>
<
center
>Beginner
<
button
onclick
=
"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
>
<
div
id
=
"gfg"
>
<
h4
>DOM Style Position Property</
h4
>
</
div
>
<
script
>
function position() {
document.getElementById(
"gfg").style.position = "inherit";
}
</
script
>
</
body
>
</
html
>
Output:
- Before clicking on the button:
- After clicking on the button:
- Before clicking on the button:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 4
- Safari 1
Browser Support: The browsers supported by DOM position property are listed below:
Contact Us