CSS anchor-size() 怎样让浮层尺寸跟随锚点元素

如果菜单或提示框要和触发按钮保持同宽，anchor-size() 可以直接读取锚点元素的尺寸，避免在 CSS 变量和脚本里重复同步。它只能服务于已经建立锚定关系的定位元素：先给触发元素设置 anchor-name，再让浮层通过 position-anchor 关联，最后在 width、inline-size 或边距中引用锚点尺寸。

官方参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor-size

最小可用组合是“锚点命名 + 浮层关联 + anchor-size() 引用”。尺寸同步解决的是大小关系，浮层放在锚点哪一侧、空间不足时如何回退，则属于 Anchor Positioning 的位置配置，不能混为一谈。

先建立默认锚点和浮层关联

anchor-size() 不会自动猜测页面中哪个按钮是参照物。触发元素通过 anchor-name 暴露一个锚点名，浮层通过 position-anchor 指定默认锚点。浮层仍需是 absolute 或 fixed 定位元素，否则没有可用的锚定定位上下文。

筛选
筛选条件

.trigger {
  /* 中文注释：用自定义锚点名让关联浮层能够引用这个按钮。 */
  anchor-name: --filter-trigger;
}

.filter-panel {
  /* 中文注释：浮层必须脱离普通流，才能使用锚定定位关系。 */
  position: absolute;
  position-anchor: --filter-trigger;
  /* 中文注释：先给不支持锚定尺寸的环境一个可读的固定退化宽度。 */
  width: 18rem;
  /* 中文注释：支持 anchor-size() 时，宽度跟随触发按钮的内联尺寸。 */
  inline-size: anchor-size(self-inline, 18rem);
  position-area: block-end span-inline-start;
}

这里的 position-area 只说明浮层放置区域，inline-size 才负责尺寸同步。把两者拆开后，读者可以单独替换位置策略，而不会误以为“放在按钮下方”就等于“和按钮同宽”。

用尺寸轴和 calc() 表达同步规则

anchor-size() 返回的是一个长度。width: anchor-size(width) 读取锚点的物理宽度，height: anchor-size(height) 读取物理高度；在响应式组件里，优先考虑 inline、block、self-inline 等逻辑轴，让规则不依赖固定书写方向。

.filter-panel {
  /* 中文注释：默认锚点为 position-anchor 指向的触发按钮。 */
  inline-size: anchor-size(self-inline, 18rem);
  /* 中文注释：宽度按锚点的内联尺寸放大，calc() 仍返回长度。 */
  max-inline-size: calc(anchor-size(self-inline, 18rem) * 1.5);
  /* 中文注释：用锚点块尺寸提供一个有边界的面板高度。 */
  max-block-size: calc(anchor-size(self-block, 12rem) + 8rem);
  /* 中文注释：缺少锚点时保留间距回退，不让声明变成无效值。 */
  margin-block-start: anchor-size(--filter-trigger block, 0.5rem);
}

函数的第一个可选部分可以指定锚点名和尺寸轴，逗号后的长度是找不到对应锚点时的回退值。例如 anchor-size(--filter-trigger block, 0.5rem) 在无法解析锚点时只会把该声明退化到 0.5rem。如果没有写回退值，包含无效锚点的声明可能被整条忽略。

三个容易误判的边界

同一个锚点名对应多个元素时，规范会按 DOM 顺序选择最后一个匹配元素；组件库应让锚点名具备实例边界，避免两个菜单实例意外共享名字。若浏览器不支持该函数，使用固定宽度、最大宽度或脚本同步作为产品层退化方案，不要把实验性布局能力当成所有环境都具备的前提。

一段紧凑的使用结论

把 anchor-size() 当成“从已关联锚点读取长度”的 CSS 值函数即可。需要同宽时用 inline-size: anchor-size(self-inline, fallback)；需要比例时放进 calc()；需要菜单避让时另行配置位置回退。最后用浏览器兼容性策略为不支持该能力的环境保留普通尺寸，避免把尺寸同步失败误诊为定位失败。

常见问题

anchor-size() 能直接读取任意祖先元素的宽度吗？

不能。它读取的是当前定位关系中的默认锚点，或函数中指定名称的锚点；必须先建立有效的锚点关联。

anchor-size() 和 width: 100% 有什么区别？

width: 100% 依赖包含块，而 anchor-size() 直接引用锚点尺寸。浮层包含块变化但触发按钮不变时，两者得到的结果可能不同。