零基礎前端課程

CHAPTER 08 · 180 MINUTES

定位先問「以誰為準」，不是先猜 top 和 right

把 NEW 標籤貼在所屬卡片右上角，並讓返回按鈕隨捲動固定在視窗右下角。

3個明確任務
2種參考點
1套捲動測試

LEARNING GOALS

本章結束時，你能做出什麼

01

建立定位參考點

能說明 relative 不一定移動元素，而是替子元素建立座標基準。

02

貼好卡片標籤

absolute 標籤會跟著所屬卡片移動。

03

固定視窗工具

fixed 按鈕在頁面捲到底時仍留在右下角。

進場檢核與作品接力

  • 具備第 07 章成果：完成整齊且不溢出的作品卡片列表：不看答案，展示或口述第 07 章成果，並說出一項可見證據。 需要補強時從這裡接回
  • 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
  • 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回

輸入：第 07 章產物：完成整齊且不溢出的作品卡片列表

本章輸出：完成卡片標籤與固定返回按鈕

產物類型：mainline；後續用途：第 09 章

PROBLEM & ANALOGY

座標數字沒錯，標籤為什麼跑到整頁角落？

relative 像在卡片上鋪座標紙，absolute 像依座標紙貼便利貼，fixed 則像貼在攝影機鏡頭上，畫面捲動仍留在原位。

本章要解決：標籤參考到錯誤祖先、返回按鈕隨內容離開視窗，以及位置正確卻被其他層遮住。

接住上一章：Grid 已決定卡片住哪一格，Position 只處理卡片上的小物件與視窗工具。

把名詞對回畫面與程式

relative
建立卡片自己的定位參考點，通常不會離開原本流。
absolute
相對最近定位祖先放置卡片內的小物件。
fixed
相對 viewport 固定，捲動後仍留在視窗。
top / right
描述定位物件離參考邊界的距離。
z-index
處理重疊前後順序，不是修正參考點的萬用答案。

SCOPE

今天的學習邊界

必會

能自己完成

定位參考點、relative、absolute、fixed、四邊距與基本堆疊順序。

辨識

看得懂即可

z-index 像疊紙順序，位置正確但被遮住時才需要檢查。

不教

刻意延後

sticky 完整行為、複雜 stacking context 和用定位做主要排版。

CORE IDEAS

三個核心觀念

  1. absolute 會沿父層找最近的定位祖先；父卡沒有 relative 時，座標可能跑到更外層。
  2. fixed 以 viewport 為參考，適合捲動時仍需留在畫面上的工具。
  3. z-index 不是萬用答案，先確認參考點與 position 類型，再使用最小足夠層級。

DEBUG

錯誤觀察與排查順序

課堂刻意錯誤：移除卡片 relative，讓所有標籤跑向外層；再把 fixed 改成 absolute，讓按鈕捲動後離開畫面。

  1. 確認要定位的元素與預期參考對象。
  2. 沿父層找最近的定位祖先。
  3. 檢查 position 類型是否符合「跟卡片」或「跟視窗」。
  4. 再看四邊距；位置正確但被蓋住時，最後才查遮擋和最小 z-index。
症狀 01

標籤跑到整頁角落

先查：先檢查卡片是否有 position:relative，再沿父層找最近參考點。

症狀 02

返回按鈕會捲走

先查：確認 position 是 fixed，而不是只用 absolute 放在內容裡。

症狀 03

位置對了卻被蓋住

先查：最後才查遮擋與最小足夠的 z-index。

PRACTICE CONTRACT

Starter 到 Solution 是同一份骨架，任務一路加厚

開始前先確認這四件事

  • 我先寫出每個定位物件要跟卡片還是跟視窗。
  • 我已找到對應的定位參考祖先。
  • 我先確認 position 類型，再調 top、right。
  • 我會捲動測試 fixed，最後才處理 z-index。
TASK-01

建立卡片定位參考點

檔案：style.css

位置：.position-card

結果：DevTools 顯示卡片的 position 為 relative

TASK-02

把狀態標籤放到右上角

檔案：style.css

位置：.position-card__badge

結果：NEW 標籤穩定貼在卡片右上角

TASK-03

固定返回頂端按鈕

檔案：style.css

位置：.back-to-top

結果：捲動時按鈕保持在視窗右下角

  1. 先讀任務 Starter 先畫出定位者與參考者箭頭。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

______ 使用 ______ 以 ______ 為參考；我只在確認位置後用 ______ 處理重疊。

不要用負 margin、transform 或巨大 z-index 偽裝正確定位。

錄下捲動頁面的短畫面，口述卡片標籤與返回按鈕各自以誰為參考。

交件前自我檢核 4 項 · 點選每一列完成自評

下一章：整理按鈕與卡片的共同規則，建立可重複使用的基底與變體。

下一步：前往第 09 章「可重複使用的按鈕與卡片元件」，帶著本章輸出繼續累積作品。