position

Overview

W3C

Properties

background

background-attachment

The position property determines the position of an element's box.

CSS2


                                position: static | relative | absolute | fixed | inherit

Initial:	static
Applies To:	all elements
Inherited:	no
Percentages:	NA
Media:	visual

Values
DOM
Example | Values | absolute
Example | Values | fixed
Example | Values | relative
Example | Values | static
Example | DOM
Reference


                                position: value;


Value:	Description:
absolute	Position is set with top, right, bottom, and left
fixed	Position is set with top, right, bottom, and left and does not move when scrolled
inherit	Takes the same computed value as the property for the element's parent
relative	Position is offset from normal with top, right, bottom, and left
static	Position is normal


                                [window.]document.getElementById("element-id").style.position = "position";

<html>
  <head>
    <title>position</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">static</a>
    <a href="/" onmouseover="mouseover2();">relative</a>
    <a href="/" onmouseover="mouseover3();">absolute</a>
    <a href="/" onmouseover="mouseover4();">fixed</a>
    <h1 id="id1">Header</h1>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.position = "static";
    }
    function mouseover2() {
      document.getElementById("id1").style.position = "relative";
    }
    function mouseover3() {
      document.getElementById("id1").style.position = "absolute";
    }
    function mouseover4() {
      document.getElementById("id1").style.position = "fixed";
    }
    document.getElementById("id1").style.right = "40px";
    document.getElementById("id1").style.top   = "20px";
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | absolute

Example | Values | fixed

Example | Values | relative

Example | Values | static

Example | DOM

Reference