LESSON-11 · TOPIC 02
能辨認 position/z-index、transform、opacity 等建立 stacking context 的條件，並以 hit-test 判斷真正前景元素。
能辨認 position/z-index、transform、opacity 等建立 stacking context 的條件，並以 hit-test 判斷真正前景元素。
子元素的巨大 z-index 不能跳出祖先 stacking context；只把數字加大常無法解決被遮住的根因。
要修改的檔案：files/starter/style.css
定位：由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。｜依 starter-2 定位，只修改「stacking context 成因」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
推薦 badge 設 z-index:9999 仍被鄰卡遮住，因其祖先 opacity 建立另一個 context。
起始狀態：兩卡使用 absolute offset 重疊；目標卡 opacity:1。
runtime opacity 由1變0.99；required probe 回傳 frontId 與 before/after stacking 狀態。
驗收證據：現有 runtime before=1、after=0.99；required facts 包含 frontId 與 before/after
下拉選單、modal、badge 或重疊卡片的 z-index 看似無效時。
常見混淆：z-index 值只在同一 stacking context 比較；數值大不代表跨 context 全域優先。
這段程式是理解起點，不是要你直接跳過 Starter。
stacking context 像各自封閉的樓層；子元素只能在自己的樓層內排序，不能拿超大號碼跳到別棟樓上。
正式說法：A stacking context is an atomic stacking unit created by defined triggers including positioned z-index, transform, or opacity below 1；descendant z-order is resolved within that context before the context participates in its parent。
.card-front{position:relative;z-index:2;opacity:.99}.card-back{transform:translateZ(0)}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。。
檔案：files/starter/style.css 定位：由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。
要做：執行實驗切換 create-stacking class，讀取 opacity；完整 probe 在重疊中心執行 elementFromPoint。
預期：runtime opacity 由1變0.99；required probe 回傳 frontId 與 before/after stacking 狀態。
證據：現有 runtime before=1、after=0.99；required facts 包含 frontId 與 before/after
卡住先查：由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。
檔案：files/starter/style.css 定位：由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime opacity 由1變0.99；required probe 回傳 frontId 與 before/after stacking 狀態。
證據：現有 runtime before=1、after=0.99；required facts 包含 frontId 與 before/after
卡住先查：由被遮元素往上檢查 position/z-index、transform、opacity，而非只看自身 z-index。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先確認元素真的重疊，再談 z-index。
列出每層祖先的 stacking context trigger。
完整解答與原因：opacity:.99 建立新 context；elementFromPoint 顯示實際前景，子層 z-index 只能在祖先 context 內比較。