摘要

  • W3C 2023 年 6 月首次公开的 CSS Anchor Positioning 草案允许定位元素依照页面上另一处锚点的位置和尺寸来摆放，并为溢出准备候选位置。
  • 2024 年草案细化默认锚点和 position-try 一组规则：网站列出可接受的摆放顺序，浏览器测量后选能容纳气泡的位置。

表单里有个难懂的字段，旁边放一枚小小的问号。读者点它，想看一句解释。宽屏上，把说明放在按钮右侧正合适；手机上，按钮可能已在最右边，说明气泡还执意往右走，便把重要的词语塞进屏幕外。网站信守了“在按钮旁边出现”的承诺，却忘了“让人读完”的任务。开发者只好把测量尺、像素偏移和几条补丁再次摊开，仿佛每个问号都有自己的房产测绘项目。

W3C 2023 年 6 月 29 日的首份公开草案把这门测绘活写成 CSS 关系。定位元素可以相对于页面上一个或多个锚点确定大小和位置。网站以 anchor-name 命名参照物，借 anchor() 或 anchor-size() 使用锚点的坐标、尺寸。气泡仍是独立的盒子，却知道自己该跟哪颗按钮走。上方文字折行、按钮向下移动，参照物的位置一起更新；气泡无需继续守在昨天的数字旁。

屏幕边缘提出了另一道题。2023 年 6 月草案用 position-fallback 和 @position-fallback 留下备用规则：首选位置挤出包含块，浏览器便试下一个候选。右边没地方，左边可以是预先批准的第二座。浏览器本来就要计算这些盒子的尺寸；网站要决定的是哪枚按钮领着哪段说明，以及哪些位置仍让人看得出二者的关系。

后来的名字变过几次。2024 年 3 月 14 日草案和3 月 26 日草案使用 position-anchor 明指默认锚点，并以 position-try-options 写备用位置；10 月草案又把列表称作 position-try-fallbacks。这是不同版本的语法沿革，不必把一篇文章写成四张几乎一样的更新清单。更值得看的是十月草案拿这些规则实际做了什么。

它给出一个很直观的示例：气泡以 position-area: block-start 居中放在按钮上方；上边界容不下时，position-try: flip-block 把它翻到按钮下方。开发者写的是“先上后下”，不再手算“按钮距离屏幕顶端还剩几像素”。手机屏幕没有因此变宽，但问号旁边的那句话终于能完整出现。这个案例来自规范原文，正是开头那枚小按钮的可执行版本。

气泡只有一句话，菜单却可能有二十项。十月草案的 position-try-order 允许按声明顺序试位置，也能优先试留下最大宽度或高度的一侧。规范以按钮旁的弹出列表为例：上下都能放时，给列表更多高度的一侧可能更好，读者能看到更多选项。边界问题从“这句话被截断”推进到“这个控件还能不能用”，选择顺序因此不再是装饰。

页面滚动后，原来测出的坐标还要跟得上按钮。十月草案专门讨论锚点位于滚动容器内、被定位盒子却处在另一处的情况，定义滚动偏移如何参与定位，也限制某些跨容器的尺寸依赖。原因很实际：滚动常在独立于整页布局的处理路径上进行。表单往下滑时，帮助说明要跟着按钮走，却不能逼浏览器每滚一格就重新排版整页。

还有一处比像素更容易被忽略。十月草案的无障碍章节说明，视觉上贴在按钮旁的气泡，单靠 Anchor Positioning 不会自动在语义上变成按钮的说明。Popover API 可以把触发按钮与弹出层关联起来，并让按钮成为它的隐式锚点；其他场景可用 aria-describedby、aria-details 表明关系。屏幕阅读器用户需要的是能找到的解释，不是一张摆得很漂亮的失物招领启事。

W3C 发布记录把 2023 年首稿和这些 2024 年细化串在一起。问号按钮仍可待在屏幕边缘；说明换到能看清的位置。尺子收进抽屉，读者不必猜那半句消失的话。