前端面试：如何用 anchored container query 处理浮层定位降级？
题干与适用场景
你维护一个大量复用的 tooltip 组件。它用 CSS anchor positioning 贴近触发按钮，并通过 position-try fallback 避免溢出；但浮层换到另一侧后，箭头方向、滚动区域和内边距仍保持旧状态。
请设计纯 CSS 优先的方案，说明如何让 fallback 状态驱动样式、如何避免组件互相影响，以及不支持 anchor positioning 时的降级行为。
面试官考察点
- 是否理解 anchor positioning 的定位关系与 fallback 选择。
- 是否能用 anchored container query 读取实际落位，而非复制 JS 状态。
- 是否考虑可访问性、滚动边界、层叠和重复组件隔离。
- 是否提供特性检测、静态布局和渐进增强路径。
回答前需要澄清的问题
- tooltip 是普通文本、菜单还是可交互对话框？
- fallback 是上下左右切换，还是会进入滚动容器？
- 目标浏览器是否支持 anchor positioning 与 container queries？
- 组件是否允许 JS 读取尺寸，还是必须 CSS-only？
30 秒回答
我会把按钮设为 anchor，把 tooltip 设为 anchor-positioned container，并用 position-try fallback 定义候选位置。每个 fallback 用 anchored container query 改变箭头、内边距和最大高度；组件内部样式只依赖自身容器，不读全局状态。先用 @supports 检测能力，不支持时回退到静态或 JS 定位，并保留可访问的描述关联。压测视口边缘、缩放、滚动容器和长文本，确认不溢出、不遮挡焦点。
分步骤深入解答
建立 anchor 与候选位置
触发元素声明 anchor-name，tooltip 使用 position-anchor 和 inset/anchor() 关联。用 position-try fallback 描述候选位置顺序，不把方向写死在组件逻辑中。
把浮层设为查询容器
设置 container-type，让浮层内部的 anchored container query 根据实际 fallback 状态调整。查询的是锚定结果对应的容器条件，避免读取视口宽度猜测位置。
同步箭头与滚动策略
不同落位使用不同箭头边、transform-origin、max-block-size 和 overflow。长内容进入浮层内部滚动，不能让 tooltip 撑出视口或截断键盘焦点。
隔离重复组件
每个实例使用独立 anchor 名称或命名作用域，避免一个列表项的 anchor 被另一个实例匹配。层叠顺序、position-area 和遮罩规则也应局部化。
做特性检测与降级
通过 @supports (anchor-name: --x) 和必要的 container query 检测能力。降级版本可使用静态相邻内容或已有 JS 定位器，但必须保留 aria-describedby、键盘关闭和焦点顺序。
验证边界与可访问性
测试窄视口、缩放、RTL、滚动容器、触控和 reduced motion。用键盘和屏幕阅读器确认 tooltip 不抢焦点、不被裁切，fallback 改变时内容仍可读。
高质量示范回答
我会把触发按钮声明为 anchor，把 tooltip 设为 container，并给出有顺序的 position-try fallback。浮层内部用 anchored container query 根据实际落位调整箭头、内边距、最大高度和滚动方向，组件只读取自身容器条件。每个实例隔离 anchor 名称和层叠规则。用 @supports 做渐进增强，不支持时回退到静态或既有 JS 定位，同时保留 aria-describedby、键盘关闭和焦点顺序。通过窄视口、缩放、RTL、滚动容器、长文本和屏幕阅读器测试边界。
常见错误
- 用 JS 读取视口宽度猜测 fallback，而不是响应实际落位。
- 把所有 tooltip 共用一个 anchor 名称，导致实例串联。
- 只改变 top/left，不同步箭头、滚动和 transform-origin。
- 没有
@supports，让不支持浏览器出现不可见或不可操作浮层。 - 只测正常视口，忽略 RTL、缩放、滚动容器和键盘焦点。
- 把 tooltip 当对话框使用，却没有明确的可访问性语义。
追问及应对
anchored container query 与普通 container query 有何差别？
它用于根据 anchor-positioned 元素的 fallback 落位状态选择样式，普通 container query 主要依据容器尺寸或样式条件。
不支持 anchor positioning 时怎么办？
提供静态相邻布局或已有 JS 定位器，并保持相同的可访问名称、关闭方式和内容顺序；不要依赖半套新语法。
如何避免浮层遮挡焦点？
限制最大尺寸并让内容内部滚动，测试键盘 Tab、Escape、屏幕阅读器和滚动父级，确保焦点元素始终可见。
为什么不能只写四个方向的媒体查询？
媒体查询反映视口，不反映 anchor 与容器的实际空间；fallback 可能受滚动容器、字体和内容长度影响。