前面幾天我們學了 Box Model、Flexbox 跟 Grid，這些都是乖乖排隊的版面配置。但你有沒有發現，有些網頁不管你怎麼往下捲動，右下角那顆「回到頂部」的按鈕或客服聊天框，永遠都乖乖黏在同一個位置不動？

或是當你想在圖片右上角疊一個「HOT 熱門標籤」時，一般排版怎麼擠都擠不過去？

這時候，我們就需要請出 CSS 的定位神器——Position 屬性！

Position 的四大天王：抓出網頁的「座標系」

在 CSS 裡，控制元素定位主要靠 position 屬性，搭配 top、bottom、left、right 來決定它要漂到哪裡。最常用的有這四種：

1. position: static（預設值）

• 就是乖乖照著 HTML 順序排隊的普通元素，不受 top/left 影響。

2. position: relative（相對定位）

• 「以自己原本的位置為基準」進行微調。它雖然移動了，但原本佔據的空間還是會保留在那裡，不會影響其他兄弟姐妹。

3. position: absolute（絕對定位）

• 「飄浮起來，聽從最近的有定位的祖先容器指揮」。它會完全脫離原本的文檔流（就像 Figma 裡解除自動佈局、變成自由浮動的圖層），你可以精準指定它要貼在畫面的哪個角落。
• 口訣：子絕父相（子層用 absolute，父層通常要設 relative 框住它）！

4. position: fixed（固定定位）

• 「黏在瀏覽器視窗上，任憑風吹雨打永不移動」。不管你怎麼捲動網頁，它都會死守在畫面的同一個座標上。文章開頭提到的「固定導覽列」或「回到頂部按鈕」就是用這個做出來的。

今日小結

今天我們解鎖了網頁元素的「飄浮超能力」——Position 屬性，知道了怎麼用 absolute 和 fixed 把元件精準定位在我們想要的地方。

掌握了排版與定位的視覺技巧後，第二週接下來我們就要正式跨入邏輯的世界，準備迎來前端的靈魂——JavaScript 啦！