Understanding CSS Positioning

在網頁中，CSS 將每個元素視為一個矩形區塊（Box）。每個區塊則由內容（Content）、邊距（Padding）、邊框（Border）及邊界（Margin）等區域組合而成，這樣的概念又被稱為區塊模型（Box Model）。

CSS 運用區塊模型的概念，將樣式套用在元素上來決定其外觀及位置。本文接下來將介紹在 CSS 排版中不可或缺的定位（Positioning）觀念。
靜態位置（position:static）
這是所有 HTML 元素預設的 position 屬性值（也就是沒有定位），它會配合版面配置規則（Layout Rule）決定其位置座標。所以，如果在 position:static 的元素設定 top、left、right 或 bottom 等偏移（Offset）屬性將會自動被忽略。

相對位置（position:relative）
相對於原本的位置（靜態位置），也就是將元素從原先的位置，依據元素的偏移屬性，將元素作對應的距離調整，而且其原本位置的區塊空間將會被保留，位移後也可能會覆蓋其它區塊。如果有區塊相互重疊的情況，你可以使用 z-index 屬性來決定重疊的順序。


絕對位置（position:absolute）
以父元素的邊界位置為基點，再依據偏移屬性作對應的距離調整。如果其上層的親代元素都不是以 absolute 或 relative 定位時，那麼就會以 body 元素的邊界為基準。該元素會從 HTML 的正常排版（Normal Flow）中移除，然後再依據容器區塊（Containing Box）的邊界來重新定位該元素，因此也可能會覆蓋其它原塊。而所謂的正常排版是指從上而下、由左至右的編排方式。例如段落區塊（Block Box）會在其容器區塊中從上而下排列；而行內區塊（Inline Box）則是由左至右排列。


固定位置（position:fixed）
基本上與絕對位置的定位方式相同，為一的差別在於其位置固定，且不會隨捲軸的移動而改變，就像浮水印（Watermark）一樣。這個屬性值並不適用 IE 6 或更早期的版本。

參考資料：
CSS basic box model

Understanding CSS Positioning