css锚点定位能接管核心定位逻辑、大幅减少js计算量，但无法替代popper.js等库，因滚动监听、溢出翻转、焦点管理、键盘交互、动画及可访问性仍需js实现。

不能直接替代，但能接管核心定位逻辑，大幅减少 JS 计算量。 锚点定位只解决“贴哪儿”的问题，不处理滚动监听、溢出翻转、焦点管理、键盘交互、动画、可访问性等——这些仍是 JS 的责任。别指望写几行 CSS 就扔掉 Popper.js 或 Floating UI。

anchor-name 和 anchor() 必须配对生效

锚点元素必须显式声明 anchor-name，且值必须带 -- 前缀；目标元素必须用 anchor() 函数读取该名称，否则整个定位链静默失效。

• anchor-name: --tooltip ✅ 合法；anchor-name: tooltip ❌ 无效（缺 --）；anchor-name: #trigger ❌ 不是自定义标识符
• 锚点元素不能是 display: none；visibility: hidden 或 opacity: 0 可以，但隐藏后定位会失准
• anchor-name 必须设在 position: relative、absolute 或 fixed 元素上；static 下被浏览器忽略
• 同一 DOM 中重复设置相同 anchor-name，只有第一个生效；大小写敏感：--Tooltip ≠ --tooltip

target 元素的 position 和属性限制很硬

anchor() 只能在特定 CSS 属性中使用，且目标元素必须是 position: absolute 或 fixed —— 这是硬性前提，不是建议。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• ✅ 允许：top / right / bottom / left / translate / inset / inset-block-start / inset-inline-end 等
• ❌ 禁止：margin / padding / width / height / font-size 等非定位属性（即使语法合法也无效果）
• ❌ 不支持运算：top: anchor(--btn bottom) + 8px 会解析失败，必须拆成 top: anchor(--btn bottom); margin-top: 8px
• ⚠️ position-anchor 和 inset-area 已在 Chrome 125+ 中移除，旧文档里写的全是过期写法

@supports 检测 + JS fallback 是生产标配

截至 2026 年 9 月，仅 Chrome 125+/Edge 125+ 原生支持，且需用户未禁用实验特性；Safari 和 Firefox 仍无计划支持。不加降级 = 页面在多数设备上弹窗错位。

• 检测写法必须用 CSS.supports('anchor-name', '--test')，不是 'position-anchor'（后者永远返回 false）
• fallback 不只是“计算 top/left”，还要补 scroll/resize 监听、视口边界判断、自动翻转逻辑（比如 bottom → top）
• 推荐策略：CSS 定位负责基础对齐，JS 只做边界修正和事件响应，而非从零接管
• DOM 结构建议保持自由：浮层仍挂载在 下，避免祖先 overflow: hidden 截断

最易被忽略的一点：anchor 定位不响应 transform 位移。如果锚点元素靠 transform: translateX(100px) 移动，浮层不会跟随 —— 它只认 layout 位置。这类动态偏移必须用 JS 补偿，或改用 left/top 驱动位移。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！