題幹與適用場景
一個資料表格的操作按鈕會打開選單或說明氣泡。浮層需要跟隨按鈕滾動，在視口邊緣自動換位，不能被祖先裁剪；行動裝置、鍵盤操作和不支援新 CSS 的瀏覽器也要可用。請用 CSS Anchor Positioning 設計方案，並說明何時保留腳本或 Popover API。
這道題適合前端、設計系統和元件平台職位。重點是把定位關聯、溢出回退、互動語義和相容策略放在同一套工程約束中。
面試官考察點
強回答會區分 anchor 元素與 anchor-positioned 元素，說明 anchor-name、position-anchor、anchor() 或 position-area 如何建立關係；還應涵蓋 position-try 的候選順序、溢出判定、隱藏策略、滾動容器、堆疊上下文、鍵盤焦點和降級方案。
回答前需要釐清的問題
- 浮層是選單、提示、選擇器還是非互動說明？是否需要 Popover 或 dialog 語義？
- 優先位置、允許的替代位置、最小可見尺寸和安全邊距是什麼？
- 按鈕是否位於滾動容器、裁剪容器或 transformed 元素內？
- 浮層內容增長時應換位、縮小、滾動還是隱藏？
- 目標瀏覽器矩陣和舊瀏覽器的固定定位回退是什麼？
30 秒回答框架
「我會把觸發按鈕定義為 anchor，把浮層設為絕對或固定定位元素，用 anchor() 或 position-area 放到首選位置，再用 position-try 宣告上方、側方等回退。元件必須定義最大尺寸、視口安全邊距、焦點和關閉語義；不支援 Anchor Positioning 的環境使用現有 Popover 或測量腳本降級。透過滾動、縮放、長內容、鍵盤和邊緣位置測試確認浮層既不截斷也不失去可操作性。」
分步驟深入解答
第一步：建立 anchor 關係
觸發按鈕透過 anchor-name 暴露名稱，浮層透過 position-anchor 選擇它。若使用隱式關聯，要確認 DOM、作用域和多個同名 anchor 的規則，避免列表中錯誤綁定到另一個按鈕。
第二步：選擇定位表達式
anchor() 可在 inset 屬性中讀取 anchor 的邊緣或中心，position-area 則用邏輯區域表達上下左右。兩者都應配合明確的 position、尺寸上限和間距，避免只寫一個絕對像素偏移。
.action {
anchor-name: --action;
}
.menu {
position: absolute;
position-anchor: --action;
top: anchor(bottom);
inset-inline-start: anchor(start);
margin-block-start: 0.5rem;
}第三步：宣告回退順序
預設位置靠近按鈕下方；空間不足時，position-try 可以嘗試上方、內聯末端等候選。候選順序應反映產品優先級，並用邏輯方向值適配從左到右和從右到左語言。
.menu {
position-try: flip-block, flip-inline;
max-inline-size: min(90vw, 24rem);
max-block-size: min(70vh, 32rem);
overflow: auto;
}第四步：處理無法放置的狀態
所有候選都溢出時，元件要有明確決策：縮小並滾動、隱藏非關鍵提示，或轉為全螢幕面板。不要讓瀏覽器留下不可讀的半個選單，也不要把溢出檢測誤認為互動關閉。
第五步：考慮容器和堆疊上下文
overflow: hidden、裁剪層、transform、contain 和 z-index 可能改變可見邊界或定位上下文。驗證浮層實際所屬的 containing block；必要時把浮層提升到合適的頂層容器，並保留觸發按鈕與浮層的語義關係。
第六步：保留互動與無障礙語義
Anchor Positioning 只負責幾何關係，不會自動提供選單、提示或彈出層語義。互動元件仍需正確的角色、名稱、鍵盤導覽、Escape 關閉和焦點返回；非互動提示不能只靠懸停呈現。
第七步：規劃相容降級
MDN 將部分 Anchor Positioning 能力標為較新的特性。預設樣式應保證浮層仍能顯示，支援檢測後再啟用增強；舊環境可繼續使用 Popover API、元件庫定位器或最小化的測量腳本。不要因追求零腳本而犧牲選單可達性。
第八步：建立可重複驗證
涵蓋視口四角、滾動容器、縮放、動態字體、長標籤、RTL、虛擬鍵盤、鍵盤導覽和螢幕閱讀器。記錄候選位置、裁剪、焦點、滾動鎖定和布局偏移，並分別在支援與不支援環境中執行同一用例。
設計取捨與邊界
Anchor Positioning 能把常見的錨定和換位規則交給 CSS，減少逐幀測量；它仍受瀏覽器實作、定位上下文和元件語義限制。複雜碰撞策略、跨頂層視窗定位或需要精確業務測量時，仍可能需要腳本。
position-try 解決候選位置選擇，不等於自動保證內容可讀；最大尺寸、滾動、焦點和關閉行為仍需元件負責。Popover 提供部分互動語義，但不能替代所有選單或 dialog 設計。
落地計畫與證據
先選一個操作選單做試點，定義首選位置、三種回退、最大尺寸和安全邊距。記錄瀏覽器支援矩陣，並為不支援環境保留穩定的預設定位。
把 anchor 命名、回退順序、邏輯方向、裁剪邊界、角色、焦點和測試用例寫入元件文件。透過真實滾動和長內容資料檢查位置變化，避免只在靜態截圖中驗收。
常見誤區與追問
只寫 anchor() 不設回退
浮層會在邊緣被截斷。為候選位置宣告優先級，並定義所有候選失敗時的滾動或替代介面。
把定位當成互動語義
CSS 不會自動讓浮層成為選單或提示。補齊角色、名稱、鍵盤路徑、Escape 和焦點返回。
忽略滾動和裁剪祖先
固定的 z-index 不能突破錯誤的 containing block。檢查 overflow、transform、contain 和滾動上下文，再決定是否提升渲染層。
只在 Chromium 測試
新 CSS 的支援矩陣會變化。支援環境和降級環境都必須通過同一套邊緣、鍵盤、RTL 和長內容用例。
浮層仍然不可讀怎麼辦？
先確認候選位置和最大尺寸，再決定內部滾動、縮小、轉全螢幕或隱藏非關鍵內容；不要只增加 z-index 或關閉溢出檢查。