首个公开工作草案：CSS 锚点定位

W3C CSS 工作组发布 CSS 锚点定位规范的首个公开工作草案：

CSS Anchor Positioning

https://www.w3.org/TR/2023/WD-css-anchor-position-1-20230629/

首个公开工作草案为一份技术规范首个公开发布的版本，在此阶段需依据《W3C 专利政策》进行相关专利披露。详情参见： 

https://www.w3.org/2021/Process-20211102/#first-wd

该规范定义了“anchor positioning”，允许定位元素（如提示框或弹出脚注）相对于页面其他位置的一或多个“锚点元素”调整自身的大小和位置。由于锚点元素在页面上可以具有任何大小或位置，因此还定义了一个灵活的回退方案，从而尝试一系列规则，直到找到一个不会导致定位元素溢出其包含块的规则。

CSS 绝对定位（absolute positioning）允许作者将元素放置在页面的任何位置，而不考虑除其包含块之外的其他元素的布局。这种灵活性可能非常有用，但也有很大的局限性 — 通常你想要相对于某些其他元素进行定位。锚点定位（通过锚点函数 ‘anchor()’ 和 ‘anchor-size()’）允许作者实现这一点，将绝对定位的元素“锚定”到页面上的一或多个其他元素，同时还允许它们尝试几种可能的位置来找到避免重叠或溢出的“最佳”位置。

例如，作者可能希望将提示框放置在目标元素的中心和上方，除非这会将提示框置于屏幕之外，在这种情况下它应该位于目标元素的下方。这可以通过下面的 CSS 来实现：

.anchor {
  anchor-name: --tooltip;
}
.tooltip {
  /* Fixpos means we don’t need to worry about
     containing block relationships;
     the tooltip can live anywhere in the DOM. */
  position: fixed;

  /* All the anchoring behavior will default to
     referring to the --tooltip anchor. */
  anchor-default: --tooltip;

  /* Align the tooltip’s bottom to the top of the anchor,
     but automatically swap if this overflows the window
     to the tooltip’s top aligns to the anchor’s bottom
     instead. */
  bottom: anchor(auto);

  /* Set up a 300px-wide area, centered on the anchor.
     If centering would put part of it off-screen,
     instead clamp it to remain on-screen. */
  left: clamp(0px, anchor(center) - 150px, 100% - 300px);
  right: clamp(0px, anchor(center) - 150px, 100% - 300px);
  max-width: 300px;

  /* Center the tooltip in that area. */
  justify-self: center;
}

欢迎参与 GitHub 开放讨论反馈对该规范草案的意见与建议：

https://github.com/w3c/csswg-drafts/issues

进一步访问 W3C CSS 工作组主页：

https://www.w3.org/groups/wg/css/