CHAPTER 08 · PRACTICE WORKSPACE

Position、fixed 與 z-index 排錯

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

04 Solution 3/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-03;請操作完整作品,逐項核對三項 Task 的可見結果。

最新作品

NEW

餐廳訂位頁

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

向下捲動測試

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

CONTINUE

把完成品帶進本章創作挑戰

三項固定任務都已完成;下一步請改造需求、留下成果證據,不要停在照抄 Solution。

前往本章創作挑戰