精通CSS進階Web標準解決方案:相對定位與絕對位置

 

    2.2.2  相對定位

    相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。如果將top設定為20像素，那麼框將出現在原位置頂部下面20像素的地方。如果將left設定為20像素，那麼會在元素左邊建立20像素的空間，也就是將元素向右移動（見圖2-10）。

    #mybox {
      position relative;
      left: 20px;
      top: 20px;
      }

圖2-10  對元素進行相對定位

    在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。

    2.2.3  絕對位置

    相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。與之相反，絕對位置使元素的位置與文檔流無關，因此不佔據空間。普通文檔流中其他元素的布局就像絕對位置的元素不存在時一樣（見圖2-11）。

圖2-11  對元素進行絕對位置

    絕對位置的元素的位置相對於最近的已定位祖先元素。如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。根據使用者代理程式的不同，最初的包含塊可能是畫布或HTML元素。

    與相對定位的框一樣，絕對位置的框可以從它的包含塊向上、下、左、右移動。這提供了很大的靈活性。可以直接將元素定位在頁面上的任何位置。

    對於定位的主要問題是要記住每種定位的意義。相對定位是“相對於”元素在文檔流中的初始位置，而絕對位置是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼是最初的包含塊。

    因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。可以通過設定z-index屬性來控制這些框的堆放次序。z-index值越高，框在堆中的位置就越高。

    絕對位置的元素的位置相對於最近的已定位祖先元素，這使我們能夠實現一些非常有意思的效果。例如，假設希望讓一個文本段落對準一個大框的右下角。只需對包含框進行相對定位，然後相對於這個框對段落進行絕對位置：

    #branding {
      width: 700px;
      height: 100px;
      position:relative;
      }
     #branding.tel{
     position:absolute;
     right:10px;
     bottom:10px;
     text-align:right;
     }
    <div id="branding">
    <p class="tel">tel:0845 838 6163</p>
    </div>

    相對於相對定位的祖先元素對框進行絕對位置，這在大多數現代瀏覽器中實現得很好。但是，在Windows上的IE 5.5和IE 6中有一個bug。如果試圖相對於相對定位的框的右邊或底部設定絕對位置的框的位置，那麼需要確保相對定位的框已經設定了尺寸。如果沒有，那麼IE會相對於畫布定位這個框。在第9章中可以進一步瞭解這個bug和修複方法。簡單的解決方案是為相對定位的框設定寬度和高度，從而避免這一問題。

    在進行頁面配置時，絕對位置是非常有用的工具，尤其是在使用相對定位的祖先元素的情況下。完全可能只使用絕對位置建立出整個設計。為此，這些元素需要具有固定尺寸，這樣就能夠將它們定位在任何地方而不會有重疊的風險。

    因為絕對位置的元素與文檔流無關，所以它們不影響普通流中的框。如果擴大絕對位置的框（例如，通過增加字型大小），周圍的框不會重新置放。因此，尺寸的任何改變會導致絕對位置的框產生重疊，從而破壞精心調整過的布局。

    固定定位

    固定定位是絕對位置的一個子類別。差異在於固定元素的包含塊是視口。這使我們能夠建立總是出現在視窗中相同位置的浮動元素。這種情況的一個樣本可以在snook.ca上看到（見圖2-12）。部落格評論表單採用固定定位，這使它在頁面滾動時一直出現在螢幕上的相同位置。這有助於改進易用性，使用者不必為了發表評論而一直滾動到頁面底部。

    圖2-12  在snook.ca上，螢幕右邊的評論地區採用固定定位，因此一直出現在視口中的相同位置

    不幸的是，IE 6和更低版本不支援固定定位。為瞭解決這個問題，Jonathan Snook使用JavaScript在IE中重現了這個效果。