HTML要素のポジショニングのタイプには３つあり、次のように指定します。

    {position:static|relative|absolute}

デフォルトはstaticです。 この場合、HTML要素は位置を変えることができません。

relativeに設定すると、 文書の流れで決まる位置からの相対位置を指定できます。例えば、

    ☆<SPAN STYLE="position:relative;left:20;top:-20;">
        怪獣じゃないもん！
    </SPAN>

とすると本来の位置から左に20、上に20ピクセルの位置に表示されます。

☆ 怪獣じゃないもん！

absoluteとすると、 文書の流れを無視してフレームの左上隅を原点とする座標を指定できます。

    <DIV STYLE="position:absolute;left:20;">
        大怪獣サクラノドン
    </DIV>

このように次の行と重なってしまいます。

これらのポジショニングのタイプをスクリプトで取得するには次のようにします。

    <INPUT TYPE="button"
        STYLE="position:relative;"
        VALUE="押してね☆"
        ONCLICK="alert(this.style.position)"
    >

positionプロパティはリードオンリーです。

移動するにはスクリプトでポジションを変えてやります。

上のテキストは

    <DIV ID=div1 STYLE="position:relative;"
            ONCLICK="test2()">
        Dynamic Positioning
    </DIV>

のようになっていて、クリックすると右端からスクロールして元の位置に戻ってきます。

var x;

function test2() {
    x = div1.offsetWidth;
    div1.style.posLeft = x;
    setTimeout("scroll()", 50);
}

function scroll() {
    x -= 30;
    if(x <= 0)
        div1.style.posLeft = 0;
    else {
        div1.style.posLeft = x;
        setTimeout("scroll()", 50);
    }
}

posLeftプロパティを変えることによって、 テキストが移動します。 最初に右端に移動するときはoffsetWidth プロパティを使ってHTML要素の幅を得ておきます。

HTML要素のページ内での位置はoffsetLeftと offsetTopで、 ページの幅はoffsetWidthで得られますが、 ページの高さはよく分からないので適当に得てください。

上のボタンを押すと、このボタンのページ内での位置と、 このページのだいたいの幅・高さが表示されます。

function test3(obj) {
    alert("left : " + obj.offsetLeft);
    alert("top : " + obj.offsetTop);
    alert("width : " + (obj.offsetWidth
            + obj.offsetLeft));
    alert("height : " + (div_last.offsetTop
            + div_last.offsetHeight));
}

最後は、このページの一番下のHTML要素（Written…と書いてあるやつ）の 高さ方向の位置と高さを足して、だいたいのページの高さの距離を得ています。
これを利用して、ページ内を動き回るスクリプトを作りましょう。

●

上のボタンを押すと、その左の円が動きます。 その円をクリックすると元の位置に収まります。

var x, y, v, x0, y0, w, h;
var d = 30;
var Timer_id;

function test4() {
    x0 = circle1.offsetLeft;
    y0 = circle1.offsetTop;
    w = div1.offsetWidth + div1.offsetLeft;
    h = div_last.offsetTop + div_last.offsetHeight;
    x = x0;                     //絶対座標
    y = y0;
    v = 0;                      //進行方向
    //300msごとに評価
    Timer_id = setInterval("move()",  300);
}

function move() {
    if(Math.random() < 0.2)     //確率0.2で方向転換
        v = Math.floor(Math.random() * 4);
    
    //周期境界
    if(v == 0)
        x = (x + d + w) % w;
    else if(v == 1)
        x = (x - d + w) % w;
    else if(v == 2)
        y = (y + d + h) % h;
    else
        y = (y - d + h) % h;
    
    //相対座標で指定
    circle1.style.posLeft = x - x0;
    circle1.style.posTop = y - y0;
}

posLeftで横方向の位置、 posTopで高さ方向の位置を指定し、移動させます。