题干与适用场景
这道题考察你能否把“浮在按钮旁边”变成可验证的布局和交互契约。核心不只是记住 anchor-name 或 anchor()，还包括候选位置、溢出策略、滚动与缩放、支持度检测以及菜单或对话框的键盘和焦点行为。
适合讨论筛选菜单、工具提示、命令菜单或日期选择器。不要把所有浮层都做成 modal；语义和交互应由用户任务决定。
面试官真正想听什么
- 如何建立锚点关系，并解释
position-area、anchor()和 fallback 位置。 - 视口、滚动容器、缩放和动态内容变化时，布局如何保持可见。
- 不支持浏览器的渐进增强路径，而不是强行依赖 JavaScript 测量。
- 菜单、tooltip、dialog 的语义、焦点、Escape、点击外部和屏幕阅读器反馈。
- 用真实浏览器矩阵、视觉回归和键盘测试证明没有裁剪或跳动。
推荐回答结构
先定义浮层类型、锚点和最小可见约束，再给出原生 CSS 路径：锚点命名、定位策略、候选 fallback 和隐藏条件。随后说明 @supports 降级到现有定位组件或受控测量，最后覆盖焦点管理、滚动、动态尺寸和验证。
深入拆解：让定位可用且可访问
建立稳定锚点
触发按钮设置唯一的 anchor-name，浮层使用 position-anchor 或显式锚点引用。避免依赖 DOM 相邻关系猜测；列表复用时为每行生成稳定关系，卸载时清理状态。
设计候选位置和溢出规则
用 position-area 或 anchor() 表达首选位置，再用 position-try-fallbacks 或等价规则尝试另一侧、对齐边缘和缩小尺寸。设置最大高度与滚动，必要时在无法容纳时隐藏或改成全屏面板，而不是让内容被裁剪。
处理滚动和动态尺寸
锚点在滚动容器内移动时，确认定位元素的包含块和层叠上下文。菜单内容异步变化、字体加载和缩放后要重新检查可见性；不要在每次滚动事件里手写同步测量，除非降级实现确实需要。
做渐进增强
用 @supports (anchor-name: --trigger) 检测能力。支持时交给 CSS；不支持时复用已有 portal 和定位逻辑，并限制测量频率、清理监听器和处理翻转。两条路径共享菜单状态和可访问性契约。
让语义跟任务一致
菜单使用按钮、菜单项和 roving focus 或明确的方向键规则；tooltip 不应承载必须操作的内容；真正阻断背景的任务才使用 dialog。若是 modal，必须管理焦点进入、Tab 循环、Escape 和关闭后的焦点恢复。
可直接套用的回答示例
“我先把筛选器定义为非模态菜单。按钮设置稳定的 anchor-name，菜单用 position-anchor 和首选的下方对齐，再用 fallback 尝试上方和左右边缘，设置最大高度让菜单内部滚动。@supports 不成立时复用现有 portal 定位器，统一菜单状态和键盘行为。打开后焦点进入第一项，方向键移动，Escape 和点击外部关闭并把焦点还给按钮。锚点位于滚动容器时我会在窄屏、缩放、异步加载和容器裁剪场景测试；截图回归检查位置，键盘与屏幕阅读器测试检查语义，指标记录 fallback 使用率和被关闭的溢出菜单。”
常见失分点与修正
- 只写
top和left→ 说明候选位置、溢出、最大尺寸和 fallback。 - 默认所有浮层都是 modal → 先按任务区分菜单、tooltip 和 dialog。
- 忽略不支持浏览器 → 给出
@supports和现有定位降级。 - 只测桌面固定窗口 → 覆盖滚动容器、缩放、窄屏、动态内容和键盘。
- 让 CSS 解决焦点 → 说明打开、移动、关闭和恢复焦点的状态模型。
评分标准与自检清单
高分回答包含稳定锚点、候选位置、溢出与隐藏策略、渐进增强、滚动和动态尺寸边界、正确语义、焦点管理、测试矩阵和可观测性。
自检：锚点关系是否稳定？菜单放不下怎么办？容器滚动时谁负责定位？旧浏览器走哪条路径？焦点关闭后回哪里？如何证明没有裁剪、跳动和不可达内容？
追问与延伸
anchor() 和 position-area 如何选择？
position-area 适合表达相对锚点的区域；anchor() 适合把某条边或尺寸用于 inset、偏移和计算。复杂组件可组合使用，但仍需 fallback 和最大尺寸规则。
如果菜单比视口还高怎么办？
限制最大块尺寸并让内部滚动；若任务在小屏更适合连续操作，可切换为全屏或底部面板。不要把超出视口的内容留给用户自行寻找。
如何测试定位候选？
用固定锚点和不同视口、滚动位置、缩放、字体和内容长度生成截图；同时断言菜单可见区域、焦点顺序和关闭后的焦点目标。
何时仍应使用 JavaScript 定位？
需要跨旧浏览器、跨复杂 portal 边界或依赖业务碰撞数据时，可保留 JS 降级。优先让 CSS 处理支持的路径，JS 只承担能力缺口和状态同步。