使用 CSS 設定 DOM 物件的位置

by thinker

關鍵字:

在 $WEB$ 2.0 的時代，操作介面豐富化，許多效果需透過 client-side script 達成。物件定位和移動是很重要的技巧，以達成各種功能:如 menu, 視窗 ...... 等。IE 的 DHTML 有許多特別的技巧，可以達到這些功能。而本文則以 CSS 和 DOM  為基礎。

== containing block ==
要定位 DOM 物件在畫面上的位置，必先清楚定位的參考點。CSS 的 model 裡，以 containing block 的左上角為基準點。瀏灠器一開始會有一個 initial containing block，以 document 的 root element 當作 containing block，所有的定位都以 roo element 的左上角為基準點。

但，有些$應用$希望以某個 box 的左上角為基準:如，<DIV> box，<P> box ...... 等。這時必需使用 CSS 設定該 box 的 position，稱為 positioned。
{{{
<style>
DIV {
  position: relative; /* or absolute or fixed */
}
</style>
}}}
當 position 設定成 relative、absolute 或 fixed 時，該 box 就成為 child nodes 的 containing block。

== 定位方法 ==
定位之前，要先設定 node 的 position，以選定 node 和 containing block 之間的相對關係。如前面所提到，設定 position 時，同時也決定該 node 是否成為 child nodes 的 containing block。
 * relative: node 定位後的位置，將是相對於未定位之前的原始位置。
 * absolute: node 定位後的位置，將是相對於 containing block 左上角。
 * fixed: node 的位置是相對於 document 視窗的左上角位。捲動 document 時，該 node 的位置並不會隨著 containing block 移定。一旦定位後，即保持在 document 視窗的固定位置。

node 定位，以 CSS 的 top property 和 left property 設定座標。
{{{
<style>
DIV {
  position: relative;
  top: 100px;
  left: -100px;
}
</style>
}}}
此例將以原本該出現的位置為基準，向左位移 100 pixels(left: -100px)，並向下位移 100px (top: 100px)

{{{
DIV {
  position: absolute;
  top: 100px;
  left: 150px;
}
}}}
此例將以 containing block 的左上角為基準點，右移 150 pixels，下移 100 pixels。

== $javascript$ 和 DOM ==
以 $javascript$ 和 DOM 控制定位的方法，是設定 node 本身的 CSS style。
{{{
var node = document.getElementById("myobject");
node.style.position = "absolute";
node.style.top = "100px";
node.style.left = "150px";
}}}
此列等同於前段最後一例。透過 $javascript$，動態修改 node 的 CSS style，可以達到移動畫面物件的效果。

DOM 的 style 設定，請參考: http://developer.mozilla.org/en/docs/DOM:style 和 http://developer.mozilla.org/en/docs/DOM:element.style

== REFERFENCE ==
* http://www.w3.org/TR/CSS2/
* http://www.w3.org/DOM/DOMTR
* http://developer.mozilla.org/en/docs/DOM

最後更新時間: 2006-08-12 18:41:57 CST | 引用

查詢:

COMMENTS: