发布时间：2025 年 10 月 29 日
从 Chrome 143 开始，您可以使用锚定容器查询来确定锚定元素何时使用回退锚定位置。这篇博文介绍了此功能要解决的问题。
CSS 锚定位 API 提供了一种强大的方式，可将一个元素（例如弹出式窗口）与另一个元素（锚）相关联，并定义一组位置尝试回退，以在元素空间不足时使用。例如，如果您的锚定元素最初的样式设置为位于顶部，但当您滚动页面且该元素到达屏幕边缘时，浏览器可以处理“翻转”，以使其保持在视口中。
不过，锚定位置规范的第 1 级留下了一个明显的缺口：虽然 CSS 可以将元素移动到回退位置，但无法知道选择了哪个回退位置。这意味着您无法根据该最终位置应用不同的样式。如果工具提示从底部翻转到顶部，除非您使用 JavaScript 修复了它，否则其箭头仍会指向错误的方向。
锚定容器查询（在 CSS 锚定位置规范第 2 级中定义）解决了此问题，使 CSS 锚定位置具有了之前所缺少的上下文感知能力。
运作方式：查询后备
借助锚定容器查询，您可以根据浏览器解析锚点定位的方式应用样式。
此功能通过两项新的 CSS 功能进行设置：
container-type: anchored：将此属性应用于定位的元素（例如提示）。这样，它就变成了一个“知道”其锚定位置状态的查询容器。@container anchored(fallback: ...)：这种新的 @ 规则语法可让您查询最终使用了哪个 position-try-fallbacks 选项。
假设您有一个想放置在底部的提示，但希望将顶部位置作为后备位置。以下代码：
- 最初尝试将
.tooltip定位在其锚点 (--my-anchor) 的底部。 - 如果空间不够，回退会将其移至顶部。
@container查询会检测到这一点。应用顶部回退时，anchored(fallback: top)查询会变为 true。- 这样一来，您就可以将 ::before 伪元素的内容从“向上”箭头 (▲) 更改为“向下”箭头 (▼)，并调整其位置。
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
所有这些操作完全在 CSS 中完成，无需 JavaScript、观察器或额外的类。 注意：如果您使用的是弹出式窗口 API，则无需明确命名锚点，因为系统会创建隐式锚点关系。
请查看以下演示，该演示使用边框 hack 创建 CSS 三角形，并通过锚定查询重新定位三角形：
总结
锚定查询使 CSS 能够以浏览器原生方式感知定位元素的当前锚定位置。这意味着您可以构建更具弹性和情境感知能力的组件。提示箭头只是一个示例；您还可以：
- 更改菜单翻转时的背景颜色。
- 将边框样式移至最靠近锚点的边缘。
- 调整弹出框的 border-radius，使“附加”角为方角。
- 根据元素吸附到的回退位置，以不同的方式为元素添加动画效果。
这对于锚定位置和组件库来说是一大优势，可使用更少的代码实现更强大、更独立的界面元素。