css中的position屬性

在css佈局中，position發揮了極為重要的作用，很多的網頁佈局都要用position來完成。 position有四個屬性值static、absolute、relative、fixed。

static

這個屬性表示預設的位置，在設定它的時候，可以取消繼承屬性，在一般情況下則不需要設定這個屬性。

absolute

這個屬性表示絕對定位。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置就會相對於最初的包含塊。元素原先在正常文件流程中所佔的空間會關閉，就好像該元素原來不存在一樣。就比如說，上一個區塊使用absolute定位之後，下一個快不設置，那麼這兩塊就會重疊到一起。元素定位後產生一個區塊級框，不管它原來在正常流中產生何種類型的框。例如，對一個元素進行絕對定位，然後透過設定垂直或水平位置，讓這個元素相對於它的起點進行移動。

如果將​​ top 設為 10px，那麼框將在包含它的容器頂部下方 10 像素的地方。如果 left 設定為 10 像素，那麼框相對於它的容器左邊框 向右素移動10像素。

relative

這個屬性表示相對定位，設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。

如果對一個元素進行相對定位，然後可以透過設定垂直或水平位置，讓這個元素相對於它的起點進行移動。

如果將​​ top 設定為 20px，那麼方塊將在原始位置頂部下方 20 像素的地方。如果 left 設定為 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。

fixed

這個屬性表示固定定位，它用於相對於瀏覽器視窗定位，如果將top 設定為20px，那麼框將在相對於視窗頂部下方20 像素的地方，其他位置同理，也可以用百分比來表示位置。

它的效果是，不論如何拉動瀏覽器的捲軸，設定了該屬性的元素不會改變位置。

下面這段程式碼，是我用定位做的一個佈局。它的效果是：

如果我們能靈活運用position的幾個屬性，就能做出許多漂亮美觀的佈局。

;

;

html>