CSS3 定位 | Position

視區(Viewport)

當瀏覽者查看一份網頁文件時，通常使用者代理(User Agents, UA, 瀏覽器)會提供給瀏覽者一個視區(視窗或者是畫面裡的其它可視區域)。當我們調整視區大小時，UA 就有可能會改變文件上佈局。

當視區比文件所呈現的 Canvas 區域還小時，UA 可能會提供一個捲軸的機制來讓您一窺文件的全貌。理論上每個 Canvas 最多只能有一個視區，不過 UA 可以產生一個以上的 Canvas(例如在同一份文件上提供不同的可視區域, 如框架格)。

承載區塊(Containing Blocks)

如果一些 box 的位置與大小是以其它相關的「矩行方塊」的邊緣(edges)來計算的話，我們就將這樣的「矩行方塊」稱之為承載區塊(Containing Blocks)。再簡單的講，所謂承載區塊指的是，離「該元素」最近的區塊級親代元素；無論「該元素」的定位或者是浮動，皆是以它的承載區塊來做參考基準(除了 fixed 定位方式)。

底下是一個簡單的承載區塊示意圖(demo-two 的承載區塊為 demo-one)。

當親代元素為區塊型元素時，其承載區塊的大小是到內緣距離。
當親代元素為單列型元素時，其承載區塊的大小是到內容邊緣。

正常流向(Normal Flow)

什麼是正常流向呢？由上而下、由左至右這樣的走向就是所謂的正常流向；我們拿超文件標記語言來說好了，其原始碼撰寫的方向是從上而下由左至右，這就是正常流向。而瀏覽器也是依據這樣的走向來解譯(直譯)我們的原始碼。

換個角度來說，在大部分的情況下，正常流向指的是在網頁裡頭，顯示元素標籤的方式。另外，多數的 HTML 元素標籤都是屬於 inline box 或 block box。block box 裡可以包含 inline box；反之，inline box 裡不能包含有 block box。

position

屬　性	設定值
position 定位	static \| relative \| absolute \| center \| page \| fixed
預設值：static 適用於：除了 table-column-group 與 table-column 之外的全部元素繼承性：無

用來將 HTML 元素所產生的 box 定位在我們想要讓它呈現的位置上。

Static Positioning | 靜態位置的定位

依照撰寫原始碼時的順序來定位。白話的講就是依序我們撰寫 HTML 元素所產生的 box 讓它自然地排在原本流向應該在的位置上。static 這個值不用特別去指定它，因為它是預設值，也就是說所有的 box 元素一開始通通在本來應有的位置上。並且不適用 bottom、left、right 與 top 這四個屬性。

Relative Positioning | 相對位置的定位

相對於原本的位置(不是相對於其它的元素的位置)。將元素定位在相對於原本的位置；該元素會移動到我們所定位的地方，而原本位置的大小會在承載區塊中被保留。

Absolute Positioning | 絕對位置的定位

相對於承載區塊的位置。該元素會從 HTML 的流向中移除，然後依據承載區塊來重新定位給該元素應有的空間，而原本位置的大小會在承載區塊中被清除。其親代元素的定位值不可為 static。

Fixed Positioning | 固定位置的定位

相對於瀏覽器視窗的視區座標，將位置固定住不再隨捲軸的移動而改變。

bottom, left, right, top

屬　性	設定值
bottom 設定 box 下方間距 left 設定 box 左邊間距 right 設定 box 右邊間距 top 設定 box 上方間距	auto \| <length> \| <percentage>
預設值：auto 適用於：定位元素繼承性：無