如何在现代CSS中使用Anchor Positioning API实现锚点定位？-css教程-PHP中文网

锚点定位需满足多项硬性条件：anchor-name必须带--前缀、元素不能display:none、须为relative/absolute/fixed定位、anchor()仅用于top/right/bottom/left/translate等属性，且仅Chrome125+/Edge125+支持并需开启实验标志。

如何在现代css中使用anchor positioning api实现锚点定位？

锚点定位不是“写完就跑”的功能，它只在特定结构、特定浏览器、特定启用状态下生效；不满足任一硬性条件，anchor() 规则会被浏览器静默忽略，元素直接 fallback 到 top: 0; left: 0。

anchor-name 必须显式声明且带 -- 前缀

这是最常被跳过的第一步。锚点名不是 ID、class 或 data 属性，必须是 CSS 自定义标识符格式：

--tooltip-trigger ✅ 合法
tooltip-trigger ❌ 无前缀，无效
#trigger ❌ 是选择器语法，非锚点名
data-anchor="trigger" ❌ HTML 属性不参与 anchor-name 解析

同时需满足：

元素不能是 display: none（设了就失效）
可以是 visibility: hidden，但隐藏后锚点立即不可用
必须搭配 position: relative / absolute / fixed；static 下 anchor-name 被静默丢弃
大小写敏感：--Trigger 和 --trigger 是两个不同锚点

anchor() 只能在有限属性中使用

anchor() 不是通用计算函数，仅被以下 CSS 属性识别：

top / right / bottom / left
translate / inset-block-start / inset-inline-start 等 inset 相关属性

常见错误写法：

margin-top: anchor(--trigger top) ❌ margin 不支持
width: anchor-size(--trigger width) ❌ 必须用在 width 属性本身，不能套在其他属性里
top: anchor(--trigger bottom) + 4px ❌ 不支持运算，会解析失败

正确写法示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.tooltip {
  position: absolute;
  top: anchor(--trigger bottom);
  left: anchor(--trigger center);
  translate: -50% 0;
  margin-top: 4px;
}

目标元素必须是 absolute 或 fixed 定位

锚定元素（即使用 anchor() 的那个）必须是 position: absolute 或 position: fixed：

position: static 或 relative 下，整个 anchor() 规则被忽略
祖先元素若含 overflow: hidden 或 transform，旧版 Chrome（≤126）可能中断锚点跟随（Chrome 127 已修复部分）
已废弃的 position-anchor 和 inset-area 写法（如 position-anchor: --x）在 Chrome 125+ 中直接失效，不要用