锚点定位定位

CSS 锚点定位 (CSS Anchor Positioning) 学习指南

CSS 锚点定位是一项新兴的 Web 标准，旨在解决无需 JavaScript 即可将一个元素（如提示框、菜单）相对于另一个元素（锚点）进行精确布局的难题。

可以使用 OddBird 团队为 CSS 锚点定位提供的 Polyfill （CSS Anchor Positioning Polyfill）

<script type="module">
  if (!('anchorName' in document.documentElement.style)) {
    import('https://unpkg.com/@oddbird/css-anchor-positioning')
  }
</script>

核心概念

CSS 锚点定位 允许绝对定位元素跳过 DOM 结构，直接相对于页面上的任意 锚点元素 进行定位。

锚点元素 (Anchor Element)：作为基准的参考元素。
锚定元素 (Anchored Element)：需要定位的元素。

核心 API

（1）anchor-name：锚点定义

功能：将元素声明为定位基准点
语法：anchor-name: <dashed-ident>;（值必须是破折号开头的标识符（dashed-ident））

.anchor {
  anchor-name: --my-anchor; /* 定义锚点名称 */
}

（2）position-anchor：锚点绑定

功能：建立元素与锚点的定位关系
语法：position-anchor: <dashed-ident>;
注意：需配合定位属性（position: fixed/absolute）使用

.tooltip {
  position: absolute;
  position-anchor: --my-anchor; /* 关联到定义的锚点 */
}

（3）position-area：区域定位

大多数场景，使用 position-area 属性放置锚点定位元素就足够了，如果需要更精细的控制，可以使用该 anchor()函数来实现

功能：基于 3x3 网格模型快速定位元素，简化 top/left 等定位属性的设置。
语法：position-area: <vertical> <horizontal>;
说明：该属性创建一个围绕锚点的 3x3 网格，通过关键字将元素放置在对应区域。
常用值：
- 物理值：top, bottom, left, right, center
- 逻辑值：start, end, block-start, inline-end
- 跨越：span-all, span-top 等

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;

  /* 放置在锚点上方，水平居中 */
  position-area: top center;
}

（4）anchor()：动态定位

通过这个可以实现更精准的数值定位

功能：根据锚点位置计算坐标
语法：anchor(<anchor-name>? <anchor-side>)
方位参数：
- 垂直：top/center/bottom
- 水平：left/center/right
- 组合：top-left/bottom-right 等
- 百分比：50% 等

.tooltip {
  left: anchor(--my-anchor 50%);
  bottom: anchor(--my-anchor top);
}
/* 效果与上面是等同的 */
.tooltip {
  position-anchor: --my-anchor;
  left: anchor(50%);
  bottom: anchor(top);
}

（5）anchor-size()：尺寸继承

功能：获取锚点元素的尺寸值
语法：anchor-size(<anchor-name>? <dimension>)
维度参数：width/height/block/inline

.tooltip {
  /* 继承锚点宽度 */
  width: anchor-size(width);

  /* 最小高度为锚点高度的1.5倍 */
  min-height: calc(anchor-size(height) * 1.5);
}

锚点定位的候补位置（position-try-fallbacks）

CSS 的 Anchor Positioning 锚点定位支持 智能边界处理，在锚点定位中，称之为候补位置

`<'position-area'>` 关键字

当使用 position-area 进行定位时，可以提供一个可能的选项列表position-area，目标会在溢出时尝试这些选项

例子：溢出时，将目标从顶部移动到底部

`@position-try`

可以使用 @position-try 规则创建自定义位置选项来修改目标元素的位置，它几乎接受所有可以修改元素位置的属性：

插入属性 (top, left, bottom, right, inset-block, inset-inline...)
边距属性 (margin, margin-block, margin-inline...)
尺寸属性 (width, min-width, height, max-height, inline-size, block-size...)
Self-alignment 属性 (align-self, justify-self, place-self)
定位锚点属性 (position-anchor, position-area)

`<try-tactic>`

根据指定的尝试策略交换位置来创建一个新的位置选项。它有三个可能的关键字，每个关键字指定要交换哪些值，本质上是将目标从一侧更改为另一侧

4. 常见使用场景示例

实现导航栏中跟随鼠标移动的“高亮块”效果。

原理：

给每个菜单项（li 或 a）定义不同的 anchor-name。
使用一个绝对定位的背景元素（如 ul::before）。
通过 :hover 或 :has() 动态改变背景元素要锚定的目标名称。

锚点定位可以与浏览器原生的 popover 属性完美结合，用于制作下拉菜单或上下文菜单。