建立定位參考點
能說明 relative 不一定移動元素，而是替子元素建立座標基準。
CHAPTER 08 · 180 MINUTES
定位先問「以誰為準」，不是先猜 top 和 right
把 NEW 標籤貼在所屬卡片右上角，並讓返回按鈕隨捲動固定在視窗右下角。
3個明確任務
2種參考點
1套捲動測試
LEARNING GOALS
本章結束時，你能做出什麼
貼好卡片標籤
absolute 標籤會跟著所屬卡片移動。
固定視窗工具
fixed 按鈕在頁面捲到底時仍留在右下角。
PROBLEM & ANALOGY
座標數字沒錯，標籤為什麼跑到整頁角落？
relative 像在卡片上鋪座標紙，absolute
像依座標紙貼便利貼，fixed
則像貼在攝影機鏡頭上，畫面捲動仍留在原位。
本章要解決：標籤參考到錯誤祖先、返回按鈕隨內容離開視窗，以及位置正確卻被其他層遮住。
接住上一章：Grid 已決定卡片住哪一格，Position 只處理卡片上的小物件與視窗工具。
把名詞對回畫面與程式
- relative
- 建立卡片自己的定位參考點，通常不會離開原本流。
- absolute
- 相對最近定位祖先放置卡片內的小物件。
- fixed
- 相對 viewport 固定，捲動後仍留在視窗。
- top / right
- 描述定位物件離參考邊界的距離。
- z-index
- 處理重疊前後順序，不是修正參考點的萬用答案。
SCOPE
今天的學習邊界
能自己完成
定位參考點、relative、absolute、fixed、四邊距與基本堆疊順序。
看得懂即可
z-index 像疊紙順序，位置正確但被遮住時才需要檢查。
刻意延後
sticky 完整行為、複雜 stacking context 和用定位做主要排版。
CORE IDEAS
三個核心觀念
- absolute 會沿父層找最近的定位祖先；父卡沒有 relative 時，座標可能跑到更外層。
- fixed 以 viewport 為參考，適合捲動時仍需留在畫面上的工具。
- z-index 不是萬用答案，先確認參考點與 position 類型，再使用最小足夠層級。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：移除卡片 relative，讓所有標籤跑向外層；再把 fixed 改成 absolute，讓按鈕捲動後離開畫面。
- 確認要定位的元素與預期參考對象。
- 沿父層找最近的定位祖先。
- 檢查 position 類型是否符合「跟卡片」或「跟視窗」。
- 再看四邊距；位置正確但被蓋住時，最後才查遮擋和最小 z-index。
標籤跑到整頁角落
先查：先檢查卡片是否有 position:relative，再沿父層找最近參考點。
返回按鈕會捲走
先查：確認 position 是 fixed，而不是只用 absolute 放在內容裡。
位置對了卻被蓋住
先查：最後才查遮擋與最小足夠的 z-index。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我先寫出每個定位物件要跟卡片還是跟視窗。
- 我已找到對應的定位參考祖先。
- 我先確認 position 類型，再調 top、right。
- 我會捲動測試 fixed，最後才處理 z-index。
建立卡片定位參考點
檔案：style.css
位置：.position-card
結果：DevTools 顯示卡片的 position 為 relative
把狀態標籤放到右上角
檔案：style.css
位置：.position-card__badge
結果：NEW 標籤穩定貼在卡片右上角
固定返回頂端按鈕
檔案：style.css
位置：.back-to-top
結果：捲動時按鈕保持在視窗右下角
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
______ 使用 ______ 以 ______ 為參考；我只在確認位置後用 ______ 處理重疊。
不要用負 margin、transform 或巨大 z-index 偽裝正確定位。
錄下捲動頁面的短畫面，口述卡片標籤與返回按鈕各自以誰為參考。
下一章：整理按鈕與卡片的共同規則，建立可重複使用的基底與變體。