CSS Anchor Positioning 完整指南

📌 什么是 Anchor Positioning?

CSS Anchor Positioning 是 CSS 的全新定位方式，让你能够将一个元素相对于另一个元素（锚点）进行定位，无需使用 JavaScript 来处理溢出问题。

⚡ 快速示例

1. 定义锚点元素

.anchor {
    anchor-name: --my-anchor;
}

2. 将目标元素锚定到锚点

.target {
    position: absolute;
    position-anchor: --my-anchor;
}

3. 设置位置

.target {
    position-area: top right;
}

🧩 核心概念

Anchor (锚点)

用作定位参考的元素。通过 anchor-name 属性定义。

Target (目标)

相对于锚点定位的元素。必须是绝对定位元素。

Containing Block (包含块)

包含元素的盒子。对于绝对定位元素，包含块是最近的具有非 static 定位的祖先。

IMCB (Inset-Modified Containing Block)

绝对定位元素的 inset 属性会缩小其包含块，形成的新盒子称为 IMCB。position-area 和 position-try-order 等属性依赖于这个概念。

📐 position-area 属性

在锚点周围创建一个 3×3 的虚拟网格，让你将目标放置在网格的一个或多个区域中。

物理值

.target {
    position-area: top right;    /* 右上方 */
    position-area: bottom left;  /* 左下方 */
    position-area: center;       /* 居中 */
}

逻辑值 (依赖书写模式)

.target {
    position-area: start end;    /* 逻辑定位 */
    position-area: self-start self-end;
}

跨区域定位

.target {
    position-area: span-top left;    /* 跨越顶部 */
    position-area: bottom span-all;  /* 跨越整行 */
}

🔄 备用位置 (Fallback Positions)

当目标元素溢出时，可以自动切换到备用位置。

position-try-fallbacks

.target {
    position-try-fallbacks:
        --my-custom-position,
        flip-inline,
        bottom left;
}

flip 关键字

• flip-block: 在块轴上翻转
• flip-inline: 在行内轴上翻转
• flip-start: 对角翻转

position-try-order

.target {
    position-try-order: most-width;  /* 选择空间最大的位置 */
}

🎯 @position-try 规则

定义自定义位置备用方案，可以在切换位置时同时调整元素大小。

@position-try --my-custom-position {
    position-area: top left;
    width: 50px;
}

.target {
    position: absolute;
    position-area: top right;
    position-try: most-width, --my-custom-position, bottom left;
    width: 100px;
}

当目标从右上角切换到备用位置时，宽度会从 100px 自动调整为 50px。

🔗 anchor() 函数

用于更精细控制位置和大小的函数。

.target {
    top: anchor(--my-anchor bottom);
    left: anchor(--my-anchor end, 50%);
}

参数

• <anchor-element>: 锚点名称
• <anchor-side>: 锚点的哪一边 (top, bottom, start, end, center 等)
• <length-percentage>: 可选的位置偏移

👁️ position-visibility 属性

控制锚点或目标元素可见性的条件。

.target {
    position-visibility: always;           /* 始终显示 */
    position-visibility: anchors-visible;   /* 锚点不可见时隐藏 */
    position-visibility: no-overflow;      /* 溢出时隐藏 */
}

♿ 无障碍性

Anchor Positioning 本身不处理焦点管理或 ARIA 属性。这些需要手动实现或使用 Popover API。

📊 实用场景

• Tooltips (提示框): 悬停时显示的信息
• Dropdowns (下拉菜单): 点击展开的菜单
• Popovers (弹出层): 更复杂的交互组件
• Select Menus (选择菜单): 自定义选择控件
• Context Menus (右键菜单): 右键点击显示的菜单

🔮 总结

CSS Anchor Positioning 是 Web 平台的重要进步，它：

• ✅ 减少了 JavaScript 依赖
• ✅ 原生支持溢出处理
• ✅ 提供了灵活的备用位置机制
• ✅ 正在获得广泛的浏览器支持

原文: CSS Anchor Positioning Guide @ CSS-Tricks

⭐⭐⭐⭐⭐ 探索于 2026-03-17