題幹與適用場景
頁面有一個按鈕，點擊後開啟選單、提示或命令面板。Popover 需要貼近按鈕，在空間不足時翻到另一側，不能被視口或捲動容器裁切，還要支援鍵盤焦點和關閉行為。請比較傳統的 JavaScript 座標計算與 CSS Anchor Positioning，並給出漸進增強方案。
MDN 將 anchor positioning 定義為讓一個元素相對於另一個錨點定位，並提供 position-try 等回退機制；Chrome 的官方說明展示了透過 anchor-name 和 position-anchor 建立關係。強回答必須同時討論佈局、滾動、瀏覽器支援和互動語意。
面試官考察點
- 是否區分視覺定位、DOM 語意和焦點管理。
- 是否理解錨點關聯、候選位置和溢出回退，而不是背屬性名。
- 是否能解釋捲動容器、堆疊上下文和裁切邊界的影響。
- 是否設計 CSS 不可用時的最小 JavaScript 降級。
- 是否說明測試矩陣和無障礙驗收條件。
前端面試通常同時考察瀏覽器佈局基礎、可維護元件設計和邊界處理。強回答會把新 CSS 能力放入相容性和產品約束，而不是假設所有執行環境都支援它。
回答前需要澄清的問題
- Popover 是選單、Tooltip 還是對話框？不同語意決定元素角色、焦點和 Escape 行為。
- 它的定位參考是按鈕、圖示還是列表項？按鈕是否會動態移動或被虛擬化？
- 允許超出捲動容器嗎？是否需要透過頂層渲染層避免
overflow: hidden裁切？ - 支援哪些瀏覽器和 WebView？降級需要保持完整功能還是只保留行內提示？
- 位置變化是否必須動畫？使用者啟用減少動效時如何處理？
30 秒回答框架
我會先確定 Popover 語意和焦點模型，再給按鈕設定 anchor name，讓 Popover 透過 position anchor 關聯。預設放在按鈕下方，並用 position try fallback 列出上方、左右和視口內的候選位置；不要只依賴一個固定偏移。對不支援該能力的瀏覽器，使用小型定位相容層或行內降級，並用同一套無障礙測試驗證兩條路徑。
分步驟深入解答
第一步：先處理語意與焦點
選單需要可聚焦的選單項和明確的展開狀態；Tooltip 不能承載必須操作的內容；複雜命令面板可能更接近對話框。開啟時記錄觸發按鈕，關閉時恢復焦點，Escape 和點擊外部的規則要一致。CSS 只負責位置，不會替你完成這些互動。
第二步：建立錨點關係
給觸發按鈕命名錨點，Popover 指定對應的 position anchor。兩者應保持穩定的 DOM 關係或可追蹤的實例識別碼，避免列表中多個按鈕共享同一個名稱。元件銷毀、複用或虛擬滾動時，必須清理過期關聯。
第三步：定義預設位置和回退候選
先宣告最常見的下方位置，再列出上方、起始側和結束側候選。候選順序表達產品偏好，例如選單優先保持與按鈕的水平對齊，而不是為了塞進視口而縮得過小。使用 position try 機制讓瀏覽器在空間不足時選擇可行位置，並把候選失敗當作可觀測狀態。
第四步：處理邊界與滾動
檢查 Popover 是否位於被裁切的捲動容器、變換後的祖先或新的堆疊上下文中。若內容必須越過容器邊界，把浮層放入頂層渲染層，並透過錨點或實例座標保持關聯。滾動和縮放測試應覆蓋按鈕離開視口、容器巢狀和 RTL 文字方向。
第五步：保留漸進增強
功能偵測通過後使用 CSS 定位；不支援時才啟用 JavaScript 相容層。相容層讀取按鈕的邊界矩形，計算候選位置並監聽必要的滾動、尺寸和佈局變化，但只作為相容層。不要讓兩套實現同時寫入樣式，否則會出現競態和閃爍。
第六步：定義尺寸與內容約束
Popover 需要最大寬高、內邊距和可滾動內容，不能只把位置交給瀏覽器。候選位置選擇應考慮可用空間和最小可讀尺寸；內容過長時內部滾動，而不是讓整個頁面橫向溢出。動態內容載入後重新評估位置，避免首次測量失效。
第七步：處理動效與輸入裝置
位置切換動畫要有明確時長和減少動效分支。鍵盤、觸控和指標裝置都應觸發一致的開啟、關閉和焦點規則；懸停 Tooltip 不能替代鍵盤可達的說明。動畫不能延遲焦點恢復或讓螢幕閱讀器看到錯誤狀態。
第八步：建立驗證矩陣
測試預設位置、每個回退方向、窄視口、巢狀捲動容器、縮放、RTL、長文字、動態內容和不支援 CSS 的瀏覽器。斷言 Popover 不被裁切、按鈕和內容關係正確、Escape 可關閉、焦點可恢復、無障礙樹狀態一致。記錄 CSS 路徑和降級路徑的差異，避免只在寬螢幕截圖上驗收。
高品質示範回答
我會先區分選單、Tooltip 和對話框語意，建立正確的焦點與關閉模型。按鈕設定 anchor name，Popover 用 position anchor 關聯，預設放在下方，並用 position try fallback 處理上方和左右空間不足。若浮層會被捲動容器裁切，就移到頂層渲染層，同時保持實例級關聯。瀏覽器不支援時啟用單一 JavaScript 相容層，監聽必要的滾動和尺寸變化。最後用窄視口、巢狀滾動、RTL、動態內容、鍵盤和螢幕閱讀器矩陣驗收，並尊重減少動效設定。
常見錯誤
- 只計算按鈕座標 → 滾動和縮放後失效 → 讓 CSS 或相容層持續處理佈局變化。
- 把 Tooltip 當選單 → 鍵盤和螢幕閱讀器不可操作 → 先確定正確語意和焦點模型。
- 只寫一個下方位置 → 視口邊緣溢出 → 定義有順序的候選位置。
- 忽略
overflow: hidden→ 浮層被祖先裁切 → 選擇合適的頂層算繪邊界。 - CSS 和 JavaScript 同時改位置 → 競態和閃爍 → 功能偵測後只啟用一條路徑。
- 只測寬螢幕滑鼠 → 移動端和鍵盤失敗 → 覆蓋輸入裝置、RTL 和無障礙矩陣。
追問及應對
Anchor Positioning 能替代所有浮層函式庫嗎？
不能。它解決佈局關聯和位置回退，不負責焦點、角色、關閉策略、拖曳或複雜碰撞業務。元件仍需要互動層和相容策略。
Popover 被捲動容器裁切怎麼辦？
先確認是否必須跨越容器邊界。若必須跨越，放入頂層渲染層並保持錨點實例關係；若不能跨越，則限制候選位置並讓內容在容器內滾動。
多個列表項如何避免錨點名稱衝突？
為每個實例生成穩定關聯，或使用元件生命週期管理名稱。虛擬列表回收節點時清理舊關聯，避免 Popover 跟隨錯誤按鈕。
不支援 CSS 的瀏覽器如何降級？
使用功能偵測啟用單一 JavaScript 定位相容層，保留同樣的語意、焦點和關閉行為；如果功能不關鍵，也可降級為按鈕下方的行內內容。
動態內容載入後位置錯了怎麼辦？
讓尺寸變化觸發重新佈局；相容層只在相容路徑監聽 ResizeObserver 等必要訊號。不要用固定延遲掩蓋佈局未穩定。
如何驗證回退候選真的生效？
在每個邊緣和滾動狀態設定可復現視口，斷言最終位置、裁切、可讀尺寸和錨點距離，而不是只檢查某個 CSS 類名。
何時仍選擇 JavaScript 浮層函式庫？
需要廣泛瀏覽器支援、複雜碰撞演算法、跨文件定位或成熟無障礙互動時，函式庫可能提供更完整的風險控制；CSS 可作為逐步替換的佈局基礎。