现代css中不存在anchor-default属性，它从未被标准化或实现；正确做法是用anchor()函数配合position-area语义控制，且必须通过css.supports('top', 'anchor(--test top)')检测并搭配js fallback。
现代 CSS 中根本没有 anchor-default 这个属性 —— 它从未被标准化，也不在任何浏览器中实现过。所有提到它的教程、博客或代码片段，都是混淆了已废弃的旧语法或凭空杜撰。
为什么搜到“anchor-default”全是错的？
这是典型的术语污染：2024 年前部分实验性文档和 Chromium 早期 flag 页面里，曾用 anchor-default 指代「未显式指定 position-area 时的隐式对齐行为」，但它从来不是可配置的 CSS 属性。Chrome 125+ 彻底移除了所有类似命名，只保留函数式调用 anchor() 和语义化方位控制 position-area。
常见混淆来源包括：
- 把
position-area: auto（也已废弃）误写成anchor-default: auto - 将 JS 库（如 Popper）里的
fallbackPlacements配置名硬套进 CSS - 复制粘贴了未更新的 CodePen 示例，其中混用了过期注释和无效声明
position-area 才是真正可控的方位语义开关
你真正需要配的是 position-area，但它在 Chrome 125+ 中已被移除 —— 当前唯一合法方式是直接在定位属性中用 anchor() 显式指定边缘或中心，并靠浏览器自动推导避让逻辑。
等效替代方案（必须手动写）：
- 想实现“默认出现在触发器下方居中” →
top: anchor(--trigger bottom); left: anchor(--trigger center); translate: -50% 0; - 想让浏览器尝试翻转（比如空间不足时上移）→ 必须配合
@supports+ JS fallback，CSS 层面无开关 - 不要写
position-area: block-end或任何带anchor-前缀的伪属性，它们会被静默忽略
检测和 fallback 的写法必须精准
用错检测方式会导致生产环境直接失效。当前唯一可靠的运行时判断是：
if (CSS.supports('top', 'anchor(--test top)')) {
// 启用 anchor() 定位
} else {
// 必须回退到 getBoundingClientRect()
}
注意三点：
-
CSS.supports('position-anchor', '--test')已彻底失效，返回永远为false -
anchor()函数参数必须是真实存在的anchor-name值，不能用占位符测试 - 即使检测通过，若锚点元素被
transform移动，anchor()不会响应 —— 这和 JS 计算行为不一致，极易漏测
真正麻烦的不是怎么写对，而是怎么确保它在 Chrome 125+ 里开着 flag、在 Safari/Firefox 里不塌缩、在锚点被动态插入时首次渲染就准——这些都得靠 JS 补位，CSS 本身没留任何容错出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
