CSS禪意花園 2 絕對定位和相對定位

以及本宣告。

今天來講一下css中的絕對定位和相對定位，即position屬性的使用方法。

position屬性常見的值有三種：

在解釋定位方式之前，首先要闡明文件流(document flow)的概念。瀏覽器在解釋html文件時，它會將各個元素按照在html文件中出現的次序，從上到下依次排列。例如下面的**將產生如下的效果：

絕對定位

將元素設定為 position:absolute 可以使其變為絕對定位。絕對定位的元素將不再包含於文件流之中，也就是說，瀏覽器在從上到下顯示html文件的各個元素時會「忽略」掉絕對定位的元素，好像它根本不存在一樣。如下圖：

指定絕對定位之後，就可以通過left和top屬性來指定該元素的位置。一般來說，left和top以瀏覽器內容區域的左上角為原點(0,0)。但有乙個特例，即''當乙個絕對定位的元素的父元素也被絕對定位，那麼該元素的位置將以其父元素區域的左上角為原點''。

絕對定位由於可以直接指定左上角位置，因此頁面布局會很容易。但是它無法處理帶有頁尾的頁面布局，因為你無法確定正文內容的量，所以無法將頁尾元素精確地定位到正文的下方。

相對定位

相對定位使得元素在原有位置的基礎上移動top和left指定的距離。相對定位不會將元素從文件流中剔除，因此瀏覽器在顯示相對定位的元素時，會當作它還在原有位置一樣進行處理。如下面的**，可以看到div1和div3之間留出了div2的位置，而實際上div2已經向右下方偏移了一定的距離。

相對定位可以很好地解決絕對定位無法做到的頁尾布局問題。

應用

最後再用css zen garden

上的乙個例子

來說明相對定位的應用。這個設計的頁面最下方，一條巨龍盤踞在文本欄的上方。

顯然，我們無法確定正文內容的多少，因此使用絕對定位無法將龍的影象精確地定位在文本欄之上。但作者利用相對定位就很好地解決了這個問題。巨龍影象元素的css**如下：

#extradiv1

去掉position:relative屬性也許能更為明顯地看到這個技巧的用法。巨龍本應位於整個文件的下方，設計師通過相對定位將他移動到了文本欄之上。