Style positionProperty
Style Object
Definition and Usage
The position property sets or returns the type of positioning method used for an element (static, relative, absolute, or fixed).
Syntax
Setting the position property:
Object.style.position="static|absolute|fixed|relative|inherit"
Returning the position property:
Object.style.position
| Value | Description |
|---|---|
| static | Default. An element with position set to static always stays in the position given by the page flow (static elements ignore any top, bottom, left, or right declarations). |
| absolute | An element with position set to absolute can be positioned at specified coordinates relative to the first positioned (non-static) ancestor element. The position of this element can be specified by the "left", "top", "right", and "bottom" properties. |
| fixed | An element with position set to fixed can be positioned at specified coordinates relative to the browser window. The position of this element can be specified by the "left", "top", "right", and "bottom" properties. Whether the window scrolls or not, the element stays in that position. Works in IE7 (strict mode). |
| relative | An element with position set to relative can be positioned relative to its normal position, so "left:20" would move the element 20 pixels to the left of its normal position. |
| inherit | The value of the position property is inherited from the parent element. |
Browser Support
All major browsers support the position property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Change the position of an element from static (default) to absolute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="100px";
document.getElementById("b1").style.left="100px";
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<input type="button" id="b1" onclick="displayResult()" value="Position me">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="100px";
document.getElementById("b1").style.left="100px";
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<input type="button" id="b1" onclick="displayResult()" value="Position me">
</body>
</html>
Try it Yourself »
Style Object Other Extensions