CSS 定位與 CSS Transform
簡介
除了隨著內容文字流與顯示樣式來決定標籤的位置以外，我們也可以使用 position 樣式來調整標籤的位置。網頁標籤常用的定址樣式( position ) 包含以下幾種：
- static - 預設的位置，無法移動。
- relative - 相對於預設的位置，可以利用
top,left等樣式追加位移。 - absolute - 絕對位置，相對於上層相對式定址的標籤
- fixed - 固定位置，相對於瀏覽器視窗外框。
- sticky - 類似 fixed, 但只發生在特定情況下。
定址模式常搭配下列幾種屬性使用：
| 樣式名 | 可能的值 | 用途 |
| left | 數值 | 區塊相對於左方原點的位移量 |
| top | 數值 | 區塊相對於上方原點的位移量 |
| right | 數值 | 區塊相對於右方原點的位移量 |
| bottom | 數值 | 區塊相對於下方原點的位移量 |
| z-index | 數值 ( 無單位 ) | 區塊互相覆蓋時，z-index 較大的區塊會蓋掉 z-index 較小的區塊。 |
relative
相對模式。區塊可依照 left, top 等位移設定移動，並以預設排版的位置做為原點。例如，在下例中，左例為原始的排版，右例則利用 position: relative 與 top: -1em 將 手 字上移了一個字距。
夾手它人
夾手它人
用 position: relative 搭配 top 樣式來作個抖動文字效果！
若還有時間，亦可嘗試做出不同效果，如拋物線：
沒有完成的料理，根本沒有試吃的必要！absolute
絕對模式。區塊可依照 left, top 等位移設定移動，並以螢幕畫面的左上角做為原點。若未指定 left, top 等值，則預設留在預設排版的位置上。
position: absolute 會將標籤從文字流中移除，所以原本應該要排在其後方的內容會往前移、佔據這個標籤的位置。
relative、absolute 等定位方式可能會讓多個標籤互相重疊，這時候我們可以使用 z-index 來指定誰在上面。以下例來說，左右兩組色塊有著不同的 z-index 值，使得兩組在上方的標籤顏色不同。
如果標籤被包在另一個有特別設定 position 為 relative, absolute 等樣式的標籤中，則參考點會以該標籤的左上角為原點。使用這個特性我們可以很方便的製造相對座標系，比較不用擔心螢幕大小或排版造成的位置變化。
下例中的左例為原始的排版，右例中我們便將 手 字設定 position: absolute 與 top:1em。注意此「手」字標籤被另一個相對定位的標籤包住 ( 黃底標籤 )，所以他的位移是相對於包覆他的這個黃底標籤的左上點。
夾手它人
夾手它人
用 position: absolute 搭配 top 與 left 樣式來作個圓吧！
試用 position: absolute 與 top 、left 樣式做出如下圖的五個方塊，彼此重疊：
進階：讓中間的方塊蓋住外圍的方塊：
試用試利用四個標籤畫出類似下圖的笑臉：
fixed
固定模式。類似絕對模式，但位置永遠相對於螢幕左上角，並且不受捲動軸影響。網頁最上方的 導覽列 可以永遠保持在螢幕上方即為 fixed 定位做出的效果。
用 position: fixed 做個導覽用的選單列吧！
sticky
黏著模式。類似固定模式，但位置相對於上層元素。此文件右方的選單列即為 sticky 模式。此模式並非所有瀏覽器都支援，請參考 Can I Use .. ? 網站。
CSS Transform
無論任何模式的標籤，我們都可以用 transform 樣式再加以改變其座標位置，而且效果是疊加在 position 或 left 、 top 等樣式之上。而除了位移外，transform 還提供了 旋轉、縮放 等轉換樣式。
要使用 transform 樣式，我們要先了解位移、旋轉與縮放的基本語法：
位移
使用 translate(a, b) 來設定位移，其中 a 與 b 分別代表了水平與垂直方向的位移量。例如：
值得注意的是，a 與 b 也可以使用百分比 ( 如 50% )；此時，這個比例是相對於標籤大小的比例。因此，translate(-50%,0) 可以讓標籤往左移動半個標籤遠。
搭配 left: 50% 樣式，我們便可以做到區塊標籤的置中：
結果如下：
旋轉
使用 rotate(a) 來設定位移，其中 a 代表了選轉的角度，單位為 deg。例如下例可以將標籤旋轉 45 度：
要特別注意的是，旋轉的中心預設是標籤的中心，所以在做旋轉時，一定要注意標籤實際上有多大，並做對應的設定。
縮放
使用 scale(a, b) 來設定縮放量，其中 a 與 b 分別代表了水平與垂直方向的縮放量。若設定負值，則標籤會做翻轉。下例可將標籤做水平翻轉，並壓扁至原本的一半高：
試利用兩個標籤畫出半圓行，再利用 CSS Transform 的 rotate 語法將兩個半圓形各旋轉+45/-45 度，畫出下圖的 Bean Eater：
Transform 樣式
了解了基本語法後，將上列語法以空白分隔組合在一起，便可以用來設定 transform 樣式。要注意，當我們設定多組轉換時，套用到標籤上的順序都是由右至左套用。例如，下例先將標籤轉了 90 度，再往「上」移動 50px：
為了更容易理解，下例將上例的兩個轉換拆成兩個動作：
rotate(90deg)translate(0,-50px), rotate(90deg)剛剛的吃豆人看起來怪怪的，背不夠圓，嘴巴又特別寬，因為旋轉的原點不對。試著加上 translate 把他對齊吧：
transform-origin
前面有提到 rotate 的預設中心點是標籤的正中心，但我們可以利用 transform-origin: x y 樣式變更這個預設值，其中 x 與 y 分別為新原點相對於標籤左上角的水平偏移量與垂直偏移量。例如：
下圖展示不同 origin 的標籤，旋轉 45 度後的效果：
transform-origin: 0.5em 0.5em
transform-origin: 2.5em 2.5em
transform-origin: 5em 5em
使用 translate 的話，有不同的旋轉角度時我們都得重新設定 translate 的值。這次不要用 translate, 改用 transform-origin 試試看，做出三個不同開口的 Bean Eater 吧：
Stacking Context
因為標籤可以定位與做座標轉換，我們一定會碰到多個標籤互相覆蓋的問題，而決定誰蓋在誰上面，便可以使用 z-index 來決定。例如，兩個同為 position: absolute 的標籤疊在一起時， z-index 值較大的那個標籤會把另一個標籤的內容給蓋住。
然而，因為標籤可以包住其它標籤，如果有一組在一起的標籤被視為 同一堆，那麼他們的 z-index 則會被最外層的標籤所主宰。
下例中有三個標籤，分別為紅色、黃色與藍色。框中的數字分別代表標籤的 z-index 值。然而藍色區塊的 z-index 雖然較黃色區塊小，卻可以蓋住黃色區塊，這是因為紅、黃區塊被視作「同一堆」，因此其 z-index 都以頂層的紅色區塊的 z-index: 1 為主。
什麼情況下標籤會被當做是同一堆呢？如果有個標籤設定了以下的屬性，那麼他所包含的子標籤都會被當成在「這一堆」裡。
transform樣式opacity樣式filter樣式
以下補充說明 opacity 與 filter 樣式的用途。
Opacity
設定標籤的透明度。數值介於 0 ~ 1 之間， 0 代表完全透明， 1 代表完全不透明。例如：
Filter
濾鏡效果，可以調整標籤整體的顏色、飽和度、對比等等。此為較進階的樣式，可參考 MDN Web Doc。
使用 filter 樣式把這張圖 ( https://xinmeti.co/assets/img/c/sub.png ) 模糊一下吧！
範例寫法：
你可以使用的濾鏡包括但不限於 ( 以及它們的範例值 )：
blur(5px)contrast(2)hue-rotate(90deg)grayscale(80%)invert(75%)brighness(0.4)
