CHAPTER 08 · PRACTICE WORKSPACE

Position、fixed 與 z-index 排錯

完成卡片標籤與固定返回按鈕

03 Checkpoint 2 2/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

建立卡片定位參考點

修改檔案:style.css

完成後看見:DevTools 顯示卡片的 position 為 relative

TASK-02已完成

把狀態標籤放到右上角

修改檔案:style.css

完成後看見:NEW 標籤穩定貼在卡片右上角

TASK-03本階段處理

固定返回頂端按鈕

修改檔案:style.css

完成後看見:捲動時按鈕保持在視窗右下角

WORKSPACE

本階段實作區

已完成 TASK-02;先核對可見結果,再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理:固定返回頂端按鈕

修改:style.css

完成後:捲動時按鈕保持在視窗右下角

講解時展開:2 個小型比較

fixed vs absolute|視窗固定還是內容流

比較:fixed 固定在 viewport,absolute 仍屬於文件內容;返回頂端按鈕要在捲動後仍對回視窗。

現在做:在 Checkpoint 2 的 DevTools 先把 .back-to-top 的 position 暫時改成 absolute,向下捲到底並記錄按鈕是否離開 viewport;再改回 position: fixed,相同捲動位置重跑並比較,最後保留 fixed。

看預期與證據

預期:absolute 會跟著文件內容捲走,fixed 會在相同捲動前後維持視窗右下角;能說出兩者參考對象不同,不把 sticky 當成本章必會內容。

證據:留下捲動前後兩組 bounding box,並展示 computed position 的 absolute/fixed 對照。

bottom/right vs transform|位置數值與視覺位移

比較:bottom/right 直接描述 fixed 元素與 viewport 的距離,transform 只做視覺平移,不能取代定位責任。

現在做:在 Checkpoint 2 維持 position: fixed,先記錄 .back-to-top 的 computed right: 24px、bottom: 24px 與 bounding box;暫時移除 bottom/right,改用 transform: translate(-24px, -24px),重跑捲動與 focus 操作,再恢復 bottom/right 並移除 transform。

看預期與證據

預期:能指出 bottom/right 是視窗定位證據,transform 只是視覺偏移;恢復後按鈕仍要可聚焦、可點擊且不遮住主要內容。

證據:留下 computed right/bottom、transform 與 focus/點擊結果的前後對照。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 2 確認 NEW 已貼住卡片右上角,再向下捲動觀察返回按鈕仍會離開視窗。
  2. B|預測:向下捲動頁面,確認返回頂端按鈕始終留在視窗右下角,再按它回到練習區頂端。
  3. C|實作:在 style.css 的 .back-to-top 完成「固定返回頂端按鈕」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 .back-to-top 與 style.css,最後重跑原操作。
  5. E|驗收:捲動時按鈕保持在視窗右下角

完成條件:DONE-03:捲動時按鈕保持在視窗右下角

第 07 章交棒

Grid 決定卡片住哪一格,Position 決定小物件跟誰走

上一章已完成自適應卡片牆與長網址處理;本章只把標籤與視窗工具定位到正確參考點。

最新作品

NEW

餐廳訂位頁

將訂位資訊整理成清楚的操作步驟。

向下捲動測試

返回按鈕應該一直留在視窗右下角。

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「固定返回頂端按鈕」。

前往 Solution:完成 TASK-03