CSS 锚点定位生成器
可视化生成 CSS anchor-positioning 锚点定位规则，用纯 CSS 实现 tooltip / popover / dropdown 定位。
完整支持 anchor-name 声明锚点、position-anchor 引用锚点、
anchor() 函数按锚点边定位、anchor-size() 函数引用锚点尺寸、
position-try-fallbacks 翻转策略自动避让视口。
原理说明面板解析锚点定位的核心机制。8 组预设覆盖下方 tooltip、上方 tooltip、右侧 dropdown、
居中弹层、跟随宽度、双向翻转等场景。所有处理在浏览器本地完成。
实时预览
原理说明
- 锚点元素 .anchor 通过 anchor-name: --my-anchor 声明为锚点，定位元素 .tooltip 通过 position-anchor: --my-anchor 引用该锚点，建立"锚点-目标"绑定关系。
- top: anchor(bottom) 表示该属性的值等于锚点的 bottom 边位置，并偏移 8px。这是锚点定位的核心——用锚点边代替固定坐标。
- left: anchor(left) 表示该属性的值等于锚点的 left 边位置。这是锚点定位的核心——用锚点边代替固定坐标。
- position-try-fallbacks: flip-block 启用翻转避让：当定位元素在默认方向溢出视口时，浏览器自动尝试 垂直翻转（上下方向翻转），找到不溢出的位置。这是锚点定位的"自动避让"能力，无需 JS 检测视口边界。
CSS 代码
/* 锚点元素 */
.anchor {
anchor-name: --my-anchor;
}
/* 定位元素（相对锚点定位） */
.tooltip {
position: absolute;
position-anchor: --my-anchor;
top: anchor(bottom, 8px);
left: anchor(left);
position-try-fallbacks: flip-block;
}常见问题
什么是 CSS 锚点定位（anchor-positioning）？它解决了什么问题？
CSS 锚点定位（anchor-positioning）是 CSS Positioned Layout Module Level 3 引入的定位机制
（Chrome 125+ 2024 年起支持），让元素可以相对另一个"锚点"元素定位，无需 JavaScript 计算坐标。
它解决了一个长期痛点：传统 tooltip / popover / dropdown 需要用 JS 监听锚点位置、计算坐标、处理视口边界翻转，
代码复杂且在滚动/缩放时需要重新计算。锚点定位把"相对定位"交给浏览器原生处理——声明锚点，
用 anchor() 函数引用锚点边，浏览器自动维护定位关系。语法：
.anchor { anchor-name: --tip; } .tooltip { position: absolute; position-anchor: --tip; top: anchor(bottom); }。
anchor() 函数和 anchor-size() 函数有什么区别？分别什么时候用？
anchor(side)：引用锚点的边/中心位置，用于定位属性（top/left/right/bottom）。
参数为边关键字：top / bottom / left / right / center / start / end。例如 top: anchor(bottom)
表示定位元素的 top 等于锚点的 bottom 边（即定位元素出现在锚点正下方）。
anchor-size(size)：引用锚点的尺寸，用于尺寸属性（width/height）。
参数为尺寸关键字：width / height / block / inline。例如 width: anchor-size(width)
表示定位元素宽度等于锚点宽度（dropdown 宽度匹配触发按钮）。
选型原则：需要"定位在哪"用 anchor()，需要"尺寸多大"用 anchor-size()。两者可组合使用。
position-try-fallbacks 翻转策略是什么？为什么需要它？
position-try-fallbacks 是锚点定位的"自动避让"能力。当定位元素在默认方向溢出视口时，
浏览器自动尝试翻转方向，找到不溢出的位置。四种翻转策略：
flip-block：垂直翻转（上下方向翻转，默认在下则翻到上）；
flip-inline：水平翻转（左右方向翻转，默认在右则翻到左）；
flip-start：翻转对角线起始方向；
flip-end：翻转对角线结束方向。
示例：position-try-fallbacks: flip-block, flip-inline 同时启用垂直与水平翻转。
这是锚点定位相对 JS 方案的最大优势——浏览器原生检测视口边界并自动翻转，无需 JS 监听 scroll/resize。
anchor-name 和 position-anchor 的关系是什么？必须成对使用吗？
anchor-name 声明一个元素为锚点并命名（如 anchor-name: --my-anchor），
position-anchor 让定位元素引用该锚点（如 position-anchor: --my-anchor）。
两者成对使用建立"锚点-目标"绑定关系。
命名规则：anchor-name 的值是自定义标识符，推荐用 -- 前缀（与 CSS 变量一致），
如 --tooltip-anchor。一个锚点可被多个定位元素引用（共享同一 anchor-name）。
不使用 position-anchor 时，定位元素会查找最近的祖先锚点（隐式锚点），但显式声明 position-anchor
更清晰可控，推荐始终显式声明。
锚点定位和 JavaScript 定位方案（如 Popper.js / Floating UI）相比有什么优势？
JS 方案（Popper.js / Floating UI）需要监听 scroll/resize/DOM 变化，实时计算坐标并写入 style，
有性能开销与闪烁问题，且在 SSR 场景下首屏定位需等待 JS 执行。
锚点定位的优势：
1. 零 JS：浏览器原生维护定位关系，无需监听事件、无需计算坐标；
2. 零闪烁：定位在浏览器渲染阶段完成，不会出现"先错位后修正"的闪烁；
3. 自动避让：position-try-fallbacks 原生检测视口边界并翻转，无需 JS 判断；
4. SSR 友好：定位规则是静态 CSS，首屏即可正确定位，不依赖 JS 执行。
代价是浏览器兼容性（Chrome 125+ / Firefox 131+ / Safari 26+），旧浏览器需降级到 JS 方案。
anchor() 函数的偏移量怎么用？可以为负数吗？
anchor(side, offset) 的第二参数是偏移量，让定位元素与锚点边保持距离。
示例：top: anchor(bottom, 8px) 表示定位元素 top 等于锚点 bottom 边再向下偏移 8px
（即定位元素与锚点底部保持 8px 间距，典型 tooltip 间距）。
偏移量可为负数：top: anchor(bottom, -4px) 表示定位元素向上偏移 4px
（与锚点底部重叠 4px）。常用于让定位元素与锚点有部分重叠的视觉效果。
偏移量支持任意长度单位：px / rem / em / % / calc() 等。
anchor(bottom, calc(0.5rem + 4px)) 也合法。anchor-size() 同样支持第二偏移参数。
浏览器兼容性如何？不支持锚点定位的浏览器怎么降级？
锚点定位的浏览器支持：Chrome 125+（2024 年 5 月）、Edge 125+、Firefox 131+（2024 年 10 月）、
Safari 26+（2025 年起逐步支持）。目前 Chrome/Edge/Firefox 主流支持，Safari 正在跟进。
渐进降级方案：不支持 anchor() 的浏览器会忽略相关声明，定位元素退化为普通绝对定位
（基于 top/left 固定值或静态文档流）。推荐用 @supports 检测并降级：
@supports (anchor-name: --x) { /* 锚点定位代码 */ }
在 @supports 外写固定坐标降级方案，或配合 JS 库（Floating UI）作为旧浏览器兜底。
零额外开销，新旧浏览器体验都不差。
这个工具会保存我的数据吗？隐私安全如何保障？
所有配置与代码生成完全在浏览器本地处理，不发起任何网络请求，不上传任何数据到服务器。
关闭页面后所有输入即丢失。iframe 预览使用 sandbox="allow-same-origin" 沙箱隔离，
不执行脚本，不访问父页面 DOM。可打开浏览器开发者工具的 Network 面板审计网络请求，确认零上传。