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
Learn XML with <oXygen/> XML Editor - Free Trial!
 |
|
oXygen helps you learn to define,
edit, validate and transform XML documents. Supported technologies include XML Schema,
DTD, Relax NG, XSLT, XPath, XQuery, CSS.
Understand in no time how XSLT and XQuery work by using the intuitive oXygen debugger!
Do you have any XML related questions? Get free answers from the oXygen
XML forum
and from the video
demonstrations.
Download a FREE 30-day trial today!
|
|
HOME
Printer friendly page
