建立卡片定位參考點
修改檔案：style.css
完成後看見：DevTools 顯示卡片的 position 為 relative
第 07 章交棒
Grid 決定卡片住哪一格，Position 決定小物件跟誰走
上一章已完成自適應卡片牆與長網址處理；本章只把標籤與視窗工具定位到正確參考點。
最新作品
餐廳訂位頁
將訂位資訊整理成清楚的操作步驟。
向下捲動測試
返回按鈕應該一直留在視窗右下角。
CHAPTER 08 · PRACTICE WORKSPACE
完成卡片標籤與固定返回按鈕
TASK STATUS
修改檔案：style.css
完成後看見：DevTools 顯示卡片的 position 為 relative
修改檔案：style.css
完成後看見：NEW 標籤穩定貼在卡片右上角
修改檔案：style.css
完成後看見：捲動時按鈕保持在視窗右下角
WORKSPACE
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
比較：absolute 參與定位流程，transform 主要改變視覺位置；用途與後續排版影響不同。
現在做：在 Checkpoint 1 的 DevTools 先只對 .position-card__badge 加 transform: translate(40px, -20px)，觀察它雖然視覺偏移，仍會佔住原本文件流空間；移除 transform，再改用 position: absolute、top: 18px、right: 18px，重跑並比較卡片內容與標籤位置，最後保留 absolute 版本。
預期：transform 只改變視覺位置，標籤仍參與原本內容流；absolute 才會脫離文件流並以卡片為參考貼到右上角。
證據：留下兩次前後畫面，並指出標籤原本占用的文件流空間、computed transform／position 與最後的 top/right。
比較：z-index 要在定位元素真的重疊時才有可見效果，且應先用最小足夠層級，不是任意加大數字。
現在做：在 Checkpoint 1 的 Elements 暫時選取 .position-card__stack-test，加入 display: block、position: absolute、top: 18px、right: 18px、width: 132px、height: 40px、background: #203029、z-index: 1；先移除 .position-card__badge 的 z-index，觀察後加入 z-index: 2，比較同一位置的兩層誰在上方，最後移除測試顯示與暫時規則。
預期：沒有 z-index 時，後加入的測試內容層可能蓋住 badge；加上 badge 的最小 z-index 後，NEW 位於內容層上方，且兩者都仍以卡片為參考。
證據：留下重疊前後截圖，並展示 badge 的 computed position／z-index 與測試層的 position／z-index；不能只提交一個巨大數字。
完成條件：DONE-02：NEW 標籤穩定貼在卡片右上角
第 07 章交棒
上一章已完成自適應卡片牆與長網址處理；本章只把標籤與視窗工具定位到正確參考點。
將訂位資訊整理成清楚的操作步驟。
返回按鈕應該一直留在視窗右下角。
CONTINUE
前往 Checkpoint 2，依要求完成「把狀態標籤放到右上角」。