CSS | 網頁排版-position 屬性

— 自學 WEB DESIGN 日誌 Day3 —

position 屬性可大致分為四種：

1. static：預設定位，不受到 top、left 等位置參數影響。
2. relative：相對定位，依自動排列的位置進行相對移動。
3. absolute：絕對定位
4. fixed：固定在瀏覽器視窗中的絕對位置，不受頁面滾動影響

當沒有下特定 position 參數時，預設狀態即為 static， static 中文是靜態變數或以全域變數稱之，在程式執行之後變數不會有更動(by 維基百科)，簡而言之，static 就是電腦會幫忙自動排列位置。

先不管方框中的內文，只要注意方框排列即可，可以發現方框分為四個橫向欄位，就是依照 div 分割畫面的方式排列，沒有特別之處。

然後再來看看我對 position屬性設定不同的參數，所改變的情況，可以依照方框中的文字內容進行功能對照：

static

好，讓我們看看在 code 中發生什麼事。首先我利用 div 把畫面分割為 4 個方框，將每個方框定為不同的類別（class），在類別中設定 position 的屬性，可以發現不管我已經設定 left 為 20px，只要 position 為 static ，方框的位置就不可以更動。

relative

但是 relative 可就不一樣了，可以針對原先 static 自動排列的結果進行相對移動，當我設定往左 20 px，方框也依照原先的位置移動 20 px，因此是將原先的位置設為原點，而在 class 中下的參數是距離原點的相對位置。

absolute

而 absolute 顧名思義就是在整個畫面中的絕對位置，因次直接設定在頁面的所屬座標，不同於 relative，static 自動排列的原先位置並不會照成影響。

fixed

最後就是我個人覺得最 sexy 的 fixed 功能，固定的是在視窗中的絕對位置。設定位置參數如同 absolute 一樣參照 html 中的絕對位置，但不同之處在於，無論頁面怎麼滾動，都會定住在瀏覽器視窗的同一個點，也就是一隻陰魂不散的鬼（飄～）。

看一下影片會更有感覺：

為什麼我會認為她是最性感的一個功能呢？因為我們來看下 Adobe XD ideas 的網頁，發現當們頁面在移動的時候，只有右邊長條的欄位在移動，但是左邊圖片卻不為所動，更可以有視線聚焦的效果，並能夠注意左側圖片，因此可以放置當期的主題，而將較瑣碎的資訊放置在右側小欄位。所以除了利用畫面的比例依照文章的重要程度進行縮放以外，也可以將重要的畫面定格在同一位置中。

另外還有其他的 position 屬性，可以參考以下的文章，其中 sticky 也是很常見的手法，類似 relative 和 fixed 的 hybrid 。

CSS Position(定位)