现代CSS通过anchor-name与position-anchor配对实现元素自动跟随锚定，需配合anchor()函数、inset-area及fallback()策略，且仅Chrome125+/Safari17.4+/Firefox126+稳定支持。
现代 CSS 已经能完全替代 JS 实现元素自动跟随锚定，关键不是“能不能”，而是你用对了哪个特性——:has() 不行，scroll-behavior 也不行，真正起作用的是 anchor-name 和 anchor() 函数组合。
锚点定位必须配对使用 anchor-name 和 position-anchor
单独设 anchor-name 或只写 position-anchor 都不会生效。浏览器需要明确知道“谁是锚”和“谁要跟谁”，二者缺一不可。
-
anchor-name必须设在触发元素上（如按钮、链接），且值需以--开头，例如anchor-name: --trigger; -
position-anchor必须设在被定位元素上（如 tooltip、popover），值与前者严格一致，例如position-anchor: --trigger; - 被定位元素必须是
position: absolute或position: fixed，否则position-anchor被忽略 - 不支持跨 Shadow DOM 绑定；若触发元素在 shadow root 内，被定位元素也得在同一 scope 下
定位偏移要用 anchor() 函数，不是 top/left 数值
传统 top: 10px 是固定偏移，而 anchor() 是相对锚点几何边界的动态计算。写死数值会破坏跟随逻辑，尤其在滚动或缩放时失效。
- 正确写法：
top: anchor(--trigger bottom); left: anchor(--trigger right);表示“贴在触发元素底部右侧” - 支持组合写法：
inset-area: top right;定义首选布局区域，再配合position-try-fallbacks: flip-block, flip-inline;自动翻转 - 不能混用：比如
top: anchor(--trigger bottom); bottom: 0;会导致冲突，浏览器按声明顺序取最后一个有效值 -
anchor()函数内不能嵌套计算，如calc(anchor(--trigger bottom) + 8px)在当前所有浏览器中均不支持
滚动/视口边界溢出由 inset-area + fallback() 自动处理
过去 JS 库花大量代码做的“检测是否贴边、要不要翻转”，现在靠两行 CSS 就能交由浏览器内核完成，但前提是显式声明容错策略。
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
-
inset-area指定首选定位区域（如bottom表示默认放在锚点下方） -
fallback()必须成对出现，语法为fallback(top, right)，表示当首选区域不够时依次尝试的备选方案 - 常见错误是只写
fallback(top)单参数，这在 Safari 和 Firefox 中会被忽略，必须写全至少两个 - 如果未设置
fallback()，且首选区域空间不足，元素会直接被裁剪或部分不可见，不会自动降级
兼容性陷阱：Chrome 125+、Safari 17.4+、Firefox 126+ 才真正稳定
虽然 CanIUse 显示“已支持”，但早期实现存在严重 bug：Safari 17.0–17.3 会忽略 position-anchor；Firefox 124–125 的 anchor() 计算结果偏移 1–2px；Chrome 123–124 在 zoom ≠ 100% 时定位漂移。
- 上线前务必在三端真机测试滚动、缩放、窗口 resize 场景下的定位稳定性
- 不要依赖
@supports (position-anchor: --x)做降级，该特性检测在 Safari 17.3 及更早版本中始终返回 false，即使功能可用 - 降级方案建议用
@supports not (anchor-name: --x)判断，再 fallback 到 JS +getBoundingClientRect() - 目前唯一稳妥的 polyfill 是
anchor-polyfill（v2.1+），但它仅支持单锚点、不支持fallback()，复杂场景仍需手写逻辑
最易被忽略的一点：锚点元素的尺寸变化（比如文字换行、图片加载完成）不会自动触发重新定位。如果你的触发元素内容是异步渲染的，得手动调用 element.setAnchorName('--name') 或强制重绘（如 toggle class），否则跟随位置会错位。
