HTML DOM position Property
 Complete Style Object Reference
Definition and Usage
The position property places an element in a static, relative, absolute or
fixed position.
Syntax
Object.style.position=static|relative|absolute|fixed
|
Possible Values
| Value |
Description |
| static |
Default. An element with position: static always has the
position the normal flow of the page gives it (a static element ignores any
top, bottom, left, or right declarations) |
| relative |
An element with position: relative moves an element relative to its normal position, so "left:20"
adds 20 pixels to the element's LEFT position |
| absolute |
An element with position: absolute is positioned at the
specified coordinates relative to its containing block. The element's position is specified with the
"left", "top", "right", and
"bottom" properties |
| fixed |
An element with position: fixed is positioned at the
specified coordinates relative to the browser window. The element's position is specified with the
"left", "top", "right", and
"bottom" properties. The element remains at that position
regardless of scrolling. Works in IE 7 (strict mode) |
Example
The following example changes an element position from relative to absolute:
<html>
<head>
<style type="text/css">
input
{
position:relative;
}
</style>
<script type="text/javascript">
function setPositionAbsolute()
{
document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="10px";
}
</script>
</head>
<body>
<p>This is an example paragraph</p>
<p>This is an example paragraph</p>
<input type="button" id="b1" onclick="setPositionAbsolute()"
value="Set button position to be absolute" />
</body>
</html>
|
Try-It-Yourself Demos
position - Change an element position
Complete Style Object Reference
|
