STUDENT HTML DOCUMENT

第 08 章練習答案對照

先自己完成 Checkpoint 2,再用這張表定位卡住的 TASK。答案對照用來找位置,不用來整份覆蓋。

任務完成標記修改檔案修改位置可見結果
TASK-01DONE-01style.css.position-cardDevTools 顯示卡片的 position 為 relative
TASK-02DONE-02style.css.position-card__badgeNEW 標籤穩定貼在卡片右上角
TASK-03DONE-03style.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。這個層只用來讓堆疊責任可見,不需要外部素材或網路。