The position effect

position 設定對定位的影響

瀏覽器定位的基本觀念: 每一個標籤應該都會在網頁中佔有一定的位置，一般我們是用 width 表明標籤寬度，height 表示高度，這兩組數字標示了標籤的大小，我們稱為標籤區域或元件區域。至於一個標籤與其他網頁元件位置上的相對關係，我們是用標籤的 left 左邊界座標和 top 上邊界座標來表示的，所以我們稱 left 和 top 這組數值是標籤的定位點。當然有定位點當然相對就有座標原點，也就是橫軸與縱軸同為零的那個座標點，我們稱為定位參考原點，本頁簡稱參考點。這就是本段目的，先跟你釐清標籤區域、定位點、參考點等觀念，才方便我們繼續下去的討論。

測試的準備動作

在探討 CSS position 設定對標籤區域、定位點、參考點的影響之前，我們應該先準備一個測試用的 HTML ，先在 Code 做如下的輸入，以利 position 屬性改變後的觀察。

<HTML>
<BODY>
<!-- 非標籤包覆區段開始 -->
12345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890
<!-- 非標籤包覆區段結束 -->

<!-- 第一層包覆區段開始 -->
<DIV STYLE="background-color:yellow;color:black;
  width:25em;position:static;">
    12345678901234567890123456789012345678901234567890
    12345678901234567890123456789012345678901234567890

    <!-- 第二層 DIV 區段開始 -->
    <DIV STYLE="background-color:green;color:white;
      width:10em;position:static;">
        12345678901234567890
        12345678901234567890
        12345678901234567890
    </DIV>
    <!-- 第二層 DIV 區段結束 -->

    12345678901234567890123456789012345678901234567890
    123456789012345678901234567890

    <!-- 第二層 SPAN 區段開始 -->
    <SPAN STYLE="background-color:red;color:blue;
      position:static;">
        1234567890
    </SPAN>
    <!-- 第二層 SPAN 區段結束 -->

    12345678901234567890
    12345678901234567890123456789012345678901234567890
</DIV>
<!-- 第一層包覆區段結束 -->

<!-- 非標籤包覆區段開始 -->
12345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890
<!-- 非標籤包覆區段結束 -->
</BODY>
</HTML>

我們在三個標籤區段的 psoition 屬性先維持 CSS 的預設屬性 static ，也就是和不加 position 設定是一樣的。它看起來的效果請按這裏。白底表 BODY 區，黃底表第一層 DIV 區段，綠底表第二層 DIV 區段，紅底表第二層 SPAN 區段。

position absolute 和 static 的差別

我們先集中來探討 position 屬性對標籤自身定位點和參考點的影響。首先我們先來區分 STYLE="position:static;" 和 STYLE="position:absolute;" 的影響。這兩個屬性最大的分野第一個就是定位點的是否可改變。例如我們把原來 HTML 做如下的更改：

    <!-- 第二層 DIV 區段開始 -->
    <!-- 為 DIV 區段增加定位點屬性，但 position=static 維持不變。 -->
    <DIV STYLE="...left:1em;top:1em;position:static;...">
        ......
    </DIV>
    <!-- 第二層 DIV 區段結束 -->

    ................................

    <!-- 第二層 SPAN 區段開始 -->
    <!-- 為 SPAN 區段增加定位點屬性，但 position 改為 absolute 。 -->
    <SPAN STYLE="...left:2em;top:2em;position:absolute;...">
        ......
    </SPAN>
    <!-- 第二層 SPAN 區段結束 -->

我們同時為 DIV 和 SPAN 標籤設定新的定位點，但 DIV position 維持原 static 值， SPAN 的 position 卻改成 absolute ，經過如此改變後，它的顯示結果請按這裏。由此可知，SPAN 因為 position 改為 absolute ，所以當我們指定了它的定位點時，就會以參考點為基準(參考點以何處為基準，牽涉父元件的 position 屬性，如果不考慮父元件影響，所有標籤的預設狀態是以網頁視窗的 left:0,top:0 為參考點。)，移動到相對位置去。但因為 DIV 區段 position 為 static ，所以它的定位點不受 CSS 定位點設定影響，而維持原網頁各標籤順序排列時，由瀏覽器計算出來的順序排列位置，做為它的定位點。這也同時回答了一個問題，就是當一個 position=absolute 的標籤，卻沒有做 top or left 的定位點設定時，它的定位點可不是等於零，而是等於在 static 狀態下，瀏覽器為它計算出來的順序排列位置。

標籤區域內嵌與浮動

position static 與 absolute 對頁面顯示造成的影響，不只是對自己本身定位移動的問題，它還會造成相鄰元件位置的變化。因為在 position=static 的狀態下 ( 也是瀏覽器預設的標籤排列狀態) ，每一個標籤區段不管大小，都會在整個頁面插入並佔有一定的區域，它不會去佔用別標籤的區域，別標籤也不侵入它的區域，宛如在拼磁磚一樣，每一塊都固定嵌在一個牆面上。但 absolute 卻不同了，不管它區域大小，它都不會在它父元件的頁面上佔有區域，而它原本在 static 狀態下應該佔有的區域，會被它後面的標籤元件所佔用，整個 absolute 標籤宛如漂浮在它父元件的頁面上一樣。現在我們再把原 HTML 做這樣的更改：

    <!-- 第二層 DIV 區段開始 -->
    <!-- 為 DIV 區段 position=absolute，但不做定位點設定。 -->
    <DIV STYLE="...position:absolute;...">
        ......
    </DIV>
    <!-- 第二層 DIV 區段結束 -->

    ................................

    <!-- 第二層 SPAN 區段開始 -->
    <!-- 為 SPAN 區段 position=absolute，但不做定位點設定。 -->
    <SPAN STYLE="...position:absolute;...">
        ......
    </SPAN>
    <!-- 第二層 SPAN 區段結束 -->

更改後的執行效果請按這裏。在效果頁中，紅色的 SPAN 還不太明顯，但在 DIV 區段，原本父元件黃底色區段被綠底色的區段分做兩個區塊，但因綠底色的 DIV 設定了 STYLE="position:absolute;" ，所以整個黃色區塊又在綠區塊的背後合成了一塊，這是因為綠底色區段既因 absolute 作用產生了浮動的效果，它原來佔用的區域，就被它後面的網頁元件佔用，而使它後面的網頁元件產生了定位前移的作用，這就是 absolute 屬性對相鄰元件的影響。

position relative 的特性

搞清楚 absolute 和 static 的分別之後，我們對 position 的第三種屬性設定就比較容易說明，因為 relative 是 absolute 和 static 的中間體，兼有兩者一部份的特性。首先：

就定位點的能否設定來說，relative 和 position 一樣，可以借由設定定位點來改變標籤預設位置。
就浮動與內嵌來說，relative 是一種半浮動狀態，也就是說雖然它不像 static 一樣被綁的死死的，但仍然在父元件中保留有區域位置，而不會造成後面網頁元件向前位移的現象。
就定位使用的參考點來說，absolute 標籤是以父標籤的定位點做為參考點，但 relative 標籤卻是以在 static 狀態下，原排列位置做為參考點，也就是說當你為 relative 設定 left,top 為 0,0 時，relative 標籤位置不會有任何改變，看起來就和設定為 static 狀態沒什麼兩樣。

現在我們再把原來的 HTML 改一下：

    <!-- 第二層 DIV 區段開始 -->
    <!-- 為 DIV 區段 position=absolute，增加定位點設定。 -->
    <DIV STYLE="...left:1em;top:1em;position:absolute;...">
        ......
    </DIV>
    <!-- 第二層 DIV 區段結束 -->

    ................................

    <!-- 第二層 SPAN 區段開始 -->
    <!-- 為 SPAN 區段 position=relative，增加定位點設定。 -->
    <SPAN STYLE="...left:2em;top:2em;position:relative;...">
        ......
    </SPAN>
    <!-- 第二層 SPAN 區段結束 -->

執行結果請按這裏。相信看了效果呈現你就明白了，不需我再多做解釋。(IE 的使用者請和前一效果頁對照，即可明白 absolute 和 relative 對相鄰元件位移的影響。)

position 屬性對子元件定位的影響

觀看說明至此，或許大家一直有個疑惑，為何我一再說 absolute 的標籤是以父標籤的定位點為參考點，可是像本範例的綠底 DIV 和紅底 SPAN 都是被第一層黃底的 DIV 標籤包覆，所以第一層 DIV 是父元件，第二層 DIV 和 SPAN 是子元件，應該沒有錯啊，那在效果呈現中，為何替 DIV 和 SPAN 做 absolute 設定時，它們都參考到網頁視窗的原點？而不是父元件第一層 DIV 區段的定位點？你懷疑的一點都沒錯，這也就是我在 SPAN 和 DIV 之上又安排了 DIV 標籤包裹的原因。道理很簡單，那就是一個父元件的定位點要能成為子元件的參考點，必須其 position 屬性設定為 absolute or relative ，如果是 static ，那麼它的子元件就會向更上層去尋找包覆標籤的定位點為參考點，如果所有上層標籤的 position 都是 static ，或者根本沒有上層標籤，那被設為 absolute 屬性的標籤就會以網頁視窗的原點為參考點。在還沒有更改 HTML 之前請看一下第一層父 DIV position 設定為 static 時，網頁是這個樣子的。現在我們更改如下：

<!-- 第一層包覆區段開始，position 改為 absolute。 -->
<DIV STYLE="background-color:yellow;color:black;
  width:25em;position:absolute;">

    <!-- 第二層 DIV 區段開始 -->
    <DIV STYLE="...left:1em;top:1em;position:absolute;...">
        ......
    <!-- 第二層 SPAN 區段開始 -->
    <SPAN STYLE="...left:2em;top:2em;position:absolute;...">
        ......
</DIV>
<!-- 第一層包覆區段結束 -->

更改後變更為這個樣子，或許連第一層 DIV 都再定位一下，讓子元件跟著一起跑，它是這個樣子的。

其他注意事項

<BODY> 標籤無法設定 position 屬性，所以你不能用它為整頁重定位，也沒辦法以它的定位點做其他標籤的參考點。

回前頁