1. 题目与适用场景
页面中的价格标注需要跟随商品卡片：标注的起点对齐卡片内容起点，宽度等于卡片宽度；切换从左到右、从右到左或垂直书写时，关系仍保持正确。同一列表会重复渲染多组卡片与标注，部分页面还要让一个范围条同时参考两个端点。
这道题讨论 CSS Anchor Positioning 的布局模型。重点是元素如何成为锚点、绝对定位元素如何找到默认锚点、位置和尺寸函数如何解析，以及命名作用域与包含块如何限制关系。视口避让和浮层交互属于另一类实战问题。
2. 面试官考察点
- 是否理解
anchor-name声明可被引用的锚点，position-anchor为定位元素选择默认锚点。 - 是否能区分
anchor()返回位置、anchor-size()返回长度。 - 是否会用逻辑 inset 和逻辑尺寸适配书写方向，而非固定写
left、right。 - 是否知道同名锚点的匹配受文档顺序、树作用域和
anchor-scope影响。 - 是否会先确认绝对定位元素的包含块，因为函数值最终仍参与普通定位计算。
3. 回答前需要澄清的问题
- 目标元素使用
position: absolute还是position: fixed？它的包含块是谁？ - 关系是“一对一”、多个目标共用一个锚点，还是一个目标参考多个锚点？
- 页面是否重复渲染同名组件，或跨越 Shadow DOM 等树作用域？
- 是否支持 RTL 与垂直书写模式？需要同步的是物理宽度，还是逻辑 inline size？
- 锚点缺失或当前上下文不可接受时，目标元素应该回到哪个普通定位值？
4. 30 秒回答框架
先用 anchor-name 给来源元素一个虚线标识符，再让绝对或固定定位的目标通过 position-anchor 选中它。位置用 anchor() 读取锚点边缘，尺寸用 anchor-size() 读取锚点宽高或逻辑尺寸；目标的 inset 仍相对自己的包含块计算。支持不同书写方向时使用 inset-inline-*、inset-block-* 和 inline-size。重复组件用 anchor-scope 限制同名锚点，多锚点关系则在不同属性中显式写出锚点名称。
5. 从锚点到最终布局
第一步：建立显式锚点关系
来源元素通过 anchor-name 声明一个或多个名称。目标必须先进入绝对定位或固定定位，再通过 position-anchor 指定默认锚点：
.product-card {
anchor-name: --product-card;
}
.price-note {
position: absolute;
position-anchor: --product-card;
}position-anchor 只建立默认引用关系。它不会自动给目标设置 inset，也不会改变目标的包含块。若名称找不到可接受锚点，依赖该锚点的函数会使用其回退值或成为无效值，因此基础定位仍要可预测。
第二步：用 anchor() 读取位置
anchor() 产生一个长度，用在 inset 属性中，把目标的一条边连接到锚点的一条边。逻辑 inset 可以把同一规则带到不同书写方向：
.price-note {
position: absolute;
position-anchor: --product-card;
inset-block-start: anchor(end);
inset-inline-start: anchor(start);
}这里的 start 与 end 会结合当前轴解析。若要引用非默认锚点，可以把名称直接写入函数，例如 anchor(--sidebar end)。显式名称适合一个目标在不同属性中引用不同来源。
第三步：用 anchor-size() 建立尺寸关系
anchor-size() 返回锚点的物理或逻辑尺寸，而非坐标。让标注与卡片保持相同逻辑宽度，可以写：
.price-note {
inline-size: anchor-size(inline);
max-inline-size: min(32rem, anchor-size(inline));
}width、height 适合明确的物理尺寸；inline、block 适合需要随书写模式变化的组件。函数也能进入 calc()，例如把间距设为锚点 inline size 的一部分。它只提供长度，元素位置仍遵循绝对定位规则。
第四步：同时引用多个锚点
范围条可以把起点设为默认关联锚点，同时在另一个 inset 中显式引用终点：
.range-start { anchor-name: --range-start; }
.range-end { anchor-name: --range-end; }
.range-band {
position: absolute;
position-anchor: --range-start;
inset-inline-start: anchor(--range-start center);
inset-inline-end: anchor(--range-end center);
}定位元素仍只通过 position-anchor 关联一个默认锚点；其他名称可以在 anchor() 中参与位置计算。默认关联还会影响滚动关联等行为。两个 inset 都会进入目标包含块的定位方程，设计时要保证起点与终点顺序有效，并为锚点缺失、交叉或不可接受的情况准备回退。
第五步：限制同名锚点的作用域
重复组件若都声明 --item，未设作用域时，定位元素可能匹配到源码顺序中最后一个可接受锚点。anchor-scope 可以把同名关系限制在组件子树内：
.result-row {
anchor-scope: --item;
}
.result-row__value { anchor-name: --item; }
.result-row__note {
position: absolute;
position-anchor: --item;
inset-inline-start: anchor(end);
}它解决的是名称可见范围，不能跨越树作用域强行引用，也不会创建新的包含块。组件仍需明确哪个祖先负责定位上下文。
第六步：把包含块纳入计算
anchor() 返回的锚点位置会转换为目标 inset 可用的长度，目标最终仍由自己的绝对定位包含块布局。改变 position: absolute 与 fixed、移动目标 DOM、在祖先上建立新的定位上下文，都可能改变结果。排查错位时先检查目标包含块，再检查锚点匹配和函数值；只盯着锚点坐标，往往会漏掉真正的参照系。
6. 高质量示范回答
Anchor Positioning 先建立“来源元素”和“定位元素”的关系。来源用anchor-name声明名称，绝对或固定定位的目标用position-anchor选默认锚点。anchor()为 inset 提供锚点位置，anchor-size()为宽高或逻辑尺寸提供长度。组件支持 RTL 或垂直书写时，我会用逻辑 inset 与inline-size。一个目标需要两个来源时，先选一个默认关联，再在各个anchor()中写明名称；列表重复组件则用anchor-scope限制同名锚点。最后检查目标的包含块，因为锚点函数并没有绕开绝对定位模型。
7. 常见错误
- 只写
anchor-name就等待元素移动 → 尚未建立定位关系 → 给目标设置绝对或固定定位，并用position-anchor或函数中的显式名称引用。 - 把
anchor()当尺寸函数 → 位置与长度职责混淆 → 坐标用anchor()，锚点宽高用anchor-size()。 - 固定使用
left和width→ RTL 或垂直书写关系反转 → 根据组件语义改用逻辑 inset 与逻辑尺寸。 - 重复列表复用同一个名称却不设作用域 → 多个目标跟到最后一个同名锚点 → 在组件容器设置
anchor-scope。 - 把
anchor-scope当包含块 → 名称匹配正确但坐标仍错 → 单独检查负责绝对定位的祖先。 - 多锚点只写一个默认
position-anchor→ 其他属性仍错误引用默认来源 → 在对应anchor()中显式写出名称。
8. 追问及应对
追问一：anchor() 与 position-area 有什么区别？
anchor() 把某个锚点边缘转换为 inset 使用的长度，适合精确建立边对边关系。position-area 把目标放进以锚点为中心的区域网格，适合表达整体方位。两者属于同一布局体系，但思考层级不同。
追问二：anchor-size() 会让目标自动跟随锚点移动吗？
不会。它只计算一个长度。目标是否跟随位置变化取决于 anchor()、position-area 或其他定位规则；仅把 inline-size 设为 anchor-size(inline)，只会同步逻辑尺寸。
追问三：多个元素使用同一个 anchor-name 会怎样？
目标会按可接受锚点的匹配规则选择来源，同名重复组件很容易全部指向源码顺序靠后的锚点。对可重复模式，应在每个组件容器用 anchor-scope 限制名称，或生成明确的独立名称。
追问四：为什么锚点正确，目标仍可能偏移？
目标的 inset 仍属于绝对定位计算，包含块、书写模式、margin 和自身尺寸都会参与最终位置。先在开发工具中确认目标的 containing block，再检查默认锚点和每个函数的解析结果。