| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | .position-card | DevTools 顯示卡片的 position 為 relative |
| TASK-02 | DONE-02 | style.css | .position-card__badge | NEW 標籤穩定貼在卡片右上角 |
| TASK-03 | DONE-03 | style.css | .back-to-top | 捲動時按鈕保持在視窗右下角 |
Solution 不使用負 margin 或 transform 假裝定位。
第 07 章的 Grid 卡片牆在本章保留為作品骨架;四個階段都加入「第 07 章交棒」,說明 Grid 決定卡片所在欄列,本章只處理卡片上的標籤與視窗工具。#practice-shell 是返回練習區頂端的實際頁內目標,不是空的 href="#"。
六個 microLab 的比較位置:TASK-01 是「relative vs static」與「卡片 vs 外層的最近定位祖先」;TASK-02 是「absolute vs transform」與「z-index vs source order」;TASK-03 是「fixed vs absolute」與「bottom/right vs transform」。每個實驗都要留下 computed style、bounding box、捲動前後或重疊前後的證據。
TASK-02 的完成品包含一個本地測試內容層:.position-card__stack-test 使用 z-index 1,NEW badge 使用最小足夠的 z-index 2。這個層只用來讓堆疊責任可見,不需要外部素材或網路。