題干與適用場景
這題考察你能否把「浮在按鈕旁邊」變成可驗證的布局與互動契約。重點不只是 anchor-name、anchor()，還包括候選位置、溢出策略、滾動、支援度偵測及選單或對話框的焦點行為。
面試官真正想聽什麼
- 如何建立錨點關係並解釋
position-area、anchor()和 fallback。 - 視窗、滾動容器、縮放和動態內容變化時如何保持可見。
- 不支援瀏覽器的漸進增強路徑。
- 選單、tooltip、dialog 的語意、焦點、Escape、外部點擊和讀屏回饋。
推薦回答結構
先定義浮層類型、錨點和最小可見約束，再給出原生 CSS 路徑：錨點命名、定位、候選 fallback 和隱藏條件。接著說明 @supports 降級到既有定位元件，最後覆蓋焦點、滾動、動態尺寸和驗證。
深入拆解：讓定位可用且可存取
建立穩定錨點
觸發按鈕設定唯一 anchor-name，浮層使用 position-anchor 或明確引用。列表重複時為每行建立穩定關係，卸載時清理狀態。
設計候選位置和溢出規則
用 position-area 或 anchor() 表達首選位置，再用 fallback 嘗試另一側、邊緣對齊和縮小尺寸。設定最大高度與內部滾動，無法容納時改成全螢幕面板，不讓內容被裁切。
處理滾動和動態尺寸
錨點在滾動容器內移動時，確認包含區塊和層疊上下文。內容、字型或縮放變化後重新檢查可見性；降級才需要時才做受控測量。
做漸進增強
用 @supports (anchor-name: --trigger) 偵測能力。支援時交給 CSS；不支援時複用既有 portal 定位器，限制測量頻率並清理監聽器。兩條路徑共享狀態和無障礙契約。
讓語意符合任務
選單使用按鈕、選單項和方向鍵規則；tooltip 不承載必須操作的內容；真正阻斷背景才使用 dialog。Modal 必須管理進入焦點、Tab 循環、Escape 和關閉後焦點恢復。
可直接套用的回答示例
「我把篩選器定義為非模態選單。按鈕設定穩定 anchor-name，選單用 position-anchor 和下方對齊，再用 fallback 嘗試上方與左右邊緣，設定最大高度讓內部滾動。@supports 不成立時複用既有 portal 定位器，統一狀態與鍵盤行為。開啟後焦點進入第一項，方向鍵移動，Escape 和外部點擊關閉並把焦點還給按鈕。我會測試窄螢幕、滾動、縮放、非同步內容和裁切，並做截圖、鍵盤與讀屏驗證。」
常見失分點與修正
- 只寫
top、left→ 補充候選位置、溢出、最大尺寸和 fallback。 - 所有浮層都當 modal → 先按任務區分選單、tooltip、dialog。
- 忽略不支援瀏覽器 → 提供
@supports和既有定位降級。 - 只測固定桌面視窗 → 覆蓋滾動、縮放、窄螢幕、動態內容和鍵盤。
評分標準與自檢清單
高分回答包含穩定錨點、候選位置、溢出與隱藏策略、漸進增強、滾動和尺寸邊界、正確語意、焦點管理、測試矩陣和可觀測性。
追問與延伸
anchor() 和 position-area 怎麼選？
position-area 適合表達相對錨點的區域；anchor() 適合把某條邊或尺寸用於 inset、偏移與計算。複雜元件可組合，但仍需 fallback 和最大尺寸。
如果選單比視窗還高怎麼辦？
限制最大尺寸並讓內部滾動；小螢幕也可切換為全螢幕或底部面板。不要讓超出視窗的內容無法尋找。
如何測試定位候選？
用不同視窗、滾動、縮放、字型和內容長度產生截圖，並斷言可見區域、焦點順序和關閉後焦點目標。
何時仍應使用 JavaScript 定位？
跨舊瀏覽器、複雜 portal 邊界或需要業務碰撞資料時，可保留 JS 降級。CSS 處理支援路徑，JS 僅補能力缺口。