CSS - 定位

定位 - position

定位（position）在 CSS 扮演了指定元素盒在視埠（瀏覽器視窗）的某個位置，它會根據某個元素或是父元素為基準而進行偏移。常用的定位分為相對定位（relative）、絕對定位（absolute）以及固定定位（fixed）。其中，相對定位、絕對定位之間的關係，是必須要了解的重點，也就是它們在元素中所扮演的腳色，尤其是以父元素為基準時兩者關係所產生的偏移。定位有著別人沒有的特性，當元素進行定位後，元素會升至「定位層」（position-level），它是比正常流向（normal-flow）與浮動層（float-level）還高的 z 軸層級（z-index）。

絕對定位 - absolute

當區塊設定 position:absolute 時，該區塊就會脫離正常流向的配置進入定位層，其後面若還有其他元素，會自動流動到絕對定位元素位置的下方，絕對定位元素就像一個透明圖層疊壓在它們上方。絕對定位可以藉由 top、bottom、left、right 四種屬性來設定位置，在設定位置的時候，會往上層找尋一個基準定位點作為起始（為設定 absolute、relative、fixed 屬性值的父元素），如果往上一直找不到任何一個定位點，最後會以 body 視埠（瀏覽器畫面）為定位點。

相對定位 - relative

當區塊設定 position:relative 時，區塊會以自己為基準定位點來設定 top、bottom、left、right 的位置，與絕對定位不同的是，相對定位區塊移動後，原本自己所佔據的空間會留下來，其他元素是無法佔據他原本的空間。相對定位最棒的是，如果都沒有設定任何的偏移位置（沒有 top、bottom、left、right），在畫面上它不會有任何改變，具有定錨的作用。

固定定位 - fixed

position:fixed，固定定位可以說定位裡面最愛刷存在感的傢伙，它就像穿著寬鬆背心愛秀肌肉的猛男，希望成為大眾目光焦點，所以捲軸上下移動是無法脫離這位自戀狂，它就會像醒目的廣告看板固定在一個位置。固定定位只有一個基準點位置，那就是以 body 瀏覽器畫面為偏移基準點，但是，若遇到了父元素有 transform 屬性結果就不同了。

絕對定位、固定定位都會讓元素脫離正常流向。

重疊順序

當多個元素 position 屬性值不為 static，亦即是 relative、absolute、fixed 時，三者雖然特性不同，因為都進入定位層，會有誰在上、誰在下順序的配置，若都沒有設定 z-index，會有 HTML 結構出現順序，後者蓋過前者。若想改變重疊順序，可以設定 z-index，數值越大越上面，z-indexu 也可以設定負數。

不能將其作為排版工具

定位不能將其作為主要的排版工具，只能作為輔助排版的工具，這是因為定位不夠彈性，不具備 CSS 流動特性。試想，如果每個區塊都是用絕對定位設定其位置，那麼要更動時，是不是也要一個一個去修改位置呢？沒錯，這是很耗費成本的。定位常用的例子如下：

• fixed：藉由固定定位將 navbar 選單及功能區塊固定在一側，主要顯示內容還是以流動為主。
• relative ＋ absolute：父元素只設定為 relative（定錨），子元素設定 absolute 及偏移位置來設計關閉按鈕位置、促銷標籤。
• absolute ＋ transform：水平垂直置中效果。