CSS anchor-name 仅注册锚点标识符，需配合 anchor() 函数在 absolute/fixed 元素的定位属性中使用，且锚点元素须 visible 并设 position；Chrome 需开启实验标志，Safari/Firefox 不支持。
CSS anchor-name 不能直接“关联”定位元素，它只是给某个元素打一个可被 anchor() 函数引用的标记 —— 真正的关联动作发生在目标元素的定位属性里，且必须满足严格条件。
anchor-name 必须设在「可见+定位」的元素上
浏览器只认 anchor-name: --my-anchor 这种带双短横线前缀的自定义标识符，写成 my-anchor、#trigger 或 data-anchor 都无效。更关键的是：该元素不能是 display: none，也不能是 visibility: hidden；同时必须有明确的定位上下文，即至少设置 position: relative（或 absolute/fixed）。否则 Chrome 125+ 会静默忽略这个属性。
- ✅ 正确：
.trigger { anchor-name: --tooltip-trigger; position: relative; } - ❌ 无效：
.trigger { anchor-name: tooltip-trigger; }（缺--） - ❌ 无效：
.trigger { anchor-name: --tooltip-trigger; display: none; }（隐藏后锚点失效） - ❌ 无效：
.trigger { anchor-name: --tooltip-trigger; }（没设position，部分浏览器不识别）
target 元素必须用 anchor() 显式调用，且仅限特定属性
anchor-name 本身不触发任何定位行为，它只是注册了一个锚点名。真正把目标元素“锚住”的，是目标元素上的 anchor(--my-anchor top) 这类函数调用 —— 但它只能出现在 top、right、bottom、left、translate、inset-block-start 等少数定位相关属性中。写在 margin、width、transform（非 translate）里完全没反应，也不报错，极易误判为“不起作用”。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- ✅ 可用：
top: anchor(--tooltip-trigger bottom); left: anchor(--tooltip-trigger center); - ✅ 可用：
translate: -50% 0; inset-inline-start: anchor(--tooltip-trigger center); - ❌ 无效果：
margin-top: anchor(--tooltip-trigger top); - ❌ 无效果：
width: anchor(--tooltip-trigger width);（anchor-size()才管尺寸，且目前支持有限）
目标元素的 position 值必须是 absolute 或 fixed
anchor() 函数在 static 或 relative 元素上会被静默丢弃 —— 不报错、不警告、也不生效。这是最常卡住的地方。即使 anchor-name 和 anchor() 写得都对，只要目标元素没设 position: absolute 或 position: fixed，整个锚点定位就等于没写。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须：
.tooltip { position: absolute; top: anchor(--tooltip-trigger bottom); } - ❌ 白写：
.tooltip { position: relative; top: anchor(--tooltip-trigger bottom); } - ⚠️ 注意：
position: sticky也不支持anchor()
容易被忽略的点是：Chrome/Edge 当前仍需手动开启 chrome://flags/#enable-css-anchor-positioning 实验标志，Safari 和 Firefox 完全不支持；生产环境必须配 JS fallback，因为一旦浏览器不识别 anchor()，目标元素会退回到默认文档流或初始定位位置，而不是“保持原样”。
