Day03 - CSS 的「相對」概念
今天不會有 code，喔耶！
今天來聊聊一個我曾經被問過的超直接問題：
px、em、rem這些尺寸單位有什麼差別？
其實這問題就只是很單純地在問尺寸單位的差別而已，但我要說的是，其實像 em 跟 rem 就隱藏著 CSS 一個潛在的「相對」概念。
「相對」這個詞在辭典裡是「比較」、「對應」的意思，用在某 A 上，那一定會有某 B 會被拿出來給他比較或對應。
我知道還沒有人特別寫一篇文強調 CSS 的相對概念 (或是我還沒讀過)，但我覺得若能重視這個概念，其實有助於釐清一些 CSS 屬性與單位上的差異。
單位上的相對概念
回歸一開始的那個問題：
px、em、rem這些尺寸單位有什麼差別？
先不看 px，這玩意兒是尺寸單位的根，它不會有任何參照、任何對應，換句話說他是屬於一個「絕對」的概念。
但 em 跟 rem 就不一樣了，這兩個尺寸單位都會有一個參照的對象，所以這是一個「相對」的概念。
那他們參照什麼呢？
| 尺寸單位 | 參照對象 | example |
|---|---|---|
em | 參照 parent element 的尺寸 | parent element 的 font-size 設為 20px 時，則 child element 的 1em 就是 20px、2em 就是 40px |
rem | 參照 root element 的尺寸 | root element 的 font-size 設為 16px 時，則任何元素的 1rem 就是 16px、2rem 就是 32px |
rem 的 r 當作 root 來記。
那提到尺寸單位，還有一個大家很愛用的 vh 跟 vw，這兩個單位我也會把他們當作是相對的概念。
因為他們參照的是 viewport 的尺寸，而 viewport 其實會隨著瀏覽器的大小而改變，沒有一個固定的值，所以概念上他們也是「相對」的。
vh(viewport height)：1vh 等於 viewport 高度的 1%。vw(viewport width)：1vw 等於 viewport 寬度的 1%。
vh 跟 vw 不能濫用，比如看過字體大小使用參照 viewport 的這兩個單位，喔，這簡直是災難。
要記得 vh 跟 vw 參照的是 viewport，拿他們當字體大小很容易就會看到你的字體好像受到麥教授的變形術一樣，開始出現各種變形。
位置上的相對概念
另一個面試上常會問的問題就是大家耳熟能詳的 position。
先來問問大家一共可以舉出幾個 position 的屬性？
我們來稍微列出來看一下：
position | 參照對象 | 說明 |
|---|---|---|
static | 無 | element 如果沒特別設定 position，那預設就是 static，會按照元素預設的排列方式顯示（還不懂元素預設排列的話，趕快去複習 block & inline element）。此外，static 無法使用 top / left / bottom / right 等偏移屬性。 |
relative | 元素自己 | 會參照元素「原本的位置」進行偏移，但元素在文流中的空間仍然保留。簡單來說，就是「視覺上移動了，但文流上仍會保留它原先的位置」(薛丁格的偏移！)。 |
absolute | 最近一個 position 不為 static 的定位祖先 | 元素會完全脫離文流，並依據最近一個非 static 的祖先元素來定位。For example：若元素 c 的父元素 b 是 static，而祖父元素 a 是 relative，那麼 c 就會參照 a。若一路往上都找不到可以參照的祖先，則以 <html> 為基準。 |
fixed | viewport | 元素會脫離文流，並固定在 viewport 上，基本上可以想像成用一根圖釘把元素給釘在畫面上 |
sticky | 一開始是元素自己，滾動後是 viewport | 這是一個稍微有點神奇的屬性，它一開始像 relative，但滾動到特定位置後會變成 fixed 效果，黏在畫面上。要特別注意的是，很多人 sticky 失效是因為漏了設定 top（或其他方向），或是父元素加了 overflow: hidden 造成滾動邏輯被破壞。 |
想看 position 範例的可以參考我幾年前寫的文章
從上面整理的表格可以看出，position 屬性除了 static 之外，人人都有一個參照對象，就連最花心的 sticky 也是有對象可以變動著參照。
這就是 CSS 「相對」概念在位置上的體現。
所以懂了「相對」概念可以幹嘛？
說實在的，可能不能幹嘛，我只是試圖讓你透過「相對」的概念來更清楚地理解 CSS 一些單位與位置屬性上的概念。
畢竟這一塊真的很多人都是硬記的，而我很不喜歡用硬背的方式去記一個有原理的東西，很容易忘記。
實務上最經典的 position bug 就是用了 absolute 後嚴重跑版，這是個經典問題，經典到已經變成了基本，但就是會有人還是 debug 不出為什麼會大跑版。
要說他沒有記得 absolute 的定義也好，但我更傾向於他沒有理解 absolute 的原理、沒理解 absolute 背後那需要參照「最近一個 position 不為 static 的定位祖先」的「相對」概念。
其實忽略相對的概念不看，單把這篇當作尺寸單位與 position 的簡介來看我也是沒意見啦~
但如果你剛好正在學 CSS，也許這個「相對」的觀點，可以讓你在下次 debug 的時候給你一點方向，大概？