Style position Property
Example
Change the position of a <div> element from relative to absolute:
document.getElementById("myDIV").style.position = "absolute";
Try it yourself »
Definition and Usage
The position property sets or returns the type of positioning method used for an element (static, relative, absolute or fixed).
Browser Support
The position property is supported in all major browsers.
Syntax
Return the position property:
object.style.position
Set the position property:
object.style.position="static|absolute|fixed|relative|initial|inherit"
Property Values
| Value | Description |
|---|---|
| static | Elements renders in order, as they appear in the document flow. This is default. |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element |
| fixed | The element is positioned relative to the browser window |
| relative | The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | static |
|---|---|
| Return Value: | A String, representing the position type of an element |
| CSS Version | CSS2 |
More Examples
Example
Using different position 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
Return the position of a <h2> element:
alert(document.getElementById("myH2").style.position);
Try it yourself »
Related Pages
CSS tutorial: CSS Positioning
CSS reference: position property
Style Object
