CSS position-area 生成器

可视化生成 CSS position-area 定位区域规则，通过 3x3 网格把定位元素放入锚点的指定区域。完整支持物理（top/left）、逻辑（block-start/inline-start）、坐标（y-start/x-start）三套关键字体系，支持 span-left / span-right / span-top / span-bottom / span-all 跨格定位。与 anchor-positioning 协同，无需 anchor() 函数即可实现 tooltip / popover / dropdown 定位。 8 组预设覆盖下方 tooltip、右侧 dropdown、居中覆盖、底部通栏、popover 弹层、逻辑 RTL 适配等场景。所有处理在浏览器本地完成。

预设：

关键字体系

体系

物理关键字（top/left）固定方向，不受书写模式影响。

网格区域选择

行（块轴）

列（行内轴）

当前值bottom center

锚点与定位元素

锚点选择器

锚点名称

定位元素选择器

定位方式

inset 偏移（px）

启用 position-anchor 引用重置 margin/inset（popover）

3x3 网格定位图

点击单元格快速定位（单选模式），下方控件可切换 span 跨格。

实时预览

原理说明

position-area 把锚点元素视为 3x3 网格的中心单元，定位元素被放入指定的网格区域。当前值 bottom center 选中了 1 个网格单元（共 9 个）。这是 anchor-positioning 的"网格定位"模式，比 anchor() 函数更简洁。
行规格 bottom：定位元素放在结束侧（网格结束行）。
列规格 center：定位元素放在居中列（与锚点同列）。
默认对齐：行方向（bottom）默认对齐为区域相反侧（end 或 start）；列居中时，列方向默认 anchor-center 对齐。这是 position-area 的"调整默认行为"特性，无需手动写 align/justify 即可获得合理对齐。
当前使用物理关键字体系：物理关键字（top/left/bottom/right）固定方向，不受书写模式影响。

CSS 代码

/* 锚点元素 */
.anchor {
  anchor-name: --my-anchor;
}

/* 定位元素（通过 position-area 放入锚点 3x3 网格） */
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: bottom center;
  inset: 8px;
}

常见问题

什么是 CSS position-area？它和 anchor() 函数有什么区别？

position-area 是 CSS 锚点定位模块引入的属性（原名 inset-area，Chrome 125+ 2024 年起支持），它把锚点元素视为 3x3 网格的中心单元，定位元素被放入指定的网格区域。例如 position-area: top center 把定位元素放在锚点正上方居中。
与 anchor() 函数的区别：anchor() 需要为每个方向单独写 top: anchor(bottom); left: anchor(left);，繁琐且易错；position-area 用一个属性值 position-area: top left 即可完成定位，语义更直观、代码更简洁。
选型原则：需要精细控制单个方向的偏移用 anchor()，需要快速把元素放入某个网格区域用 position-area。两者也可组合使用。

position-area 的 3x3 网格是怎么划分的？九个格子分别叫什么？

position-area 把锚点周围的可用空间划分为 3x3 共 9 个网格单元，锚点本身占据中心格。三行从上到下是 top / center / bottom，三列从左到右是 left / center / right。
指定行 + 列即可定位到单个格子，如 top left（左上角）、bottom center（正下方）、 center right（正右侧）。逻辑关键字下行为 block-start/block-end，列为 inline-start/inline-end；坐标关键字下为 y-start/y-end、 x-start/x-end。

span-left / span-right / span-top / span-bottom / span-all 是什么意思？怎么用？

span-* 关键字让定位元素跨多个网格单元：
span-left：跨"居中列 + 起始列"（横向跨 2 格，向左延伸）；
span-right：跨"居中列 + 结束列"（横向跨 2 格，向右延伸）；
span-top：跨"居中行 + 起始行"（纵向跨 2 格，向上延伸）；
span-bottom：跨"居中行 + 结束行"（纵向跨 2 格，向下延伸）；
span-all：跨该轴全部 3 格（整行或整列）。
用法示例：position-area: top span-left 表示放在顶部行，横向跨居中列与起始列（顶部居中偏左两格）； position-area: bottom span-all 表示放在底部行，横向跨全部三列（底部通栏）。 span 关键字常用于菜单宽度匹配、通栏提示等场景。

物理关键字、逻辑关键字、坐标关键字有什么区别？该选哪个？

物理关键字（top/left/bottom/right）：固定方向，不受书写模式影响。简单直观，适合 LTR 横排场景。
逻辑关键字（block-start/inline-start/block-end/inline-end）：随 writing-mode 和 direction 自动适配。在 RTL（阿拉伯语）或竖排（日文中文）场景下自动翻转方向，适合国际化组件库。
坐标关键字（y-start/y-end/x-start/x-end）：按坐标轴方向，与 writing-mode 解耦，适合需要按绝对坐标轴思考的场景。
选型建议：中文/英文 LTR 横排站点用物理关键字最直观；需要支持 RTL/竖排的多语言站点用逻辑关键字；坐标关键字较少使用，但在特定坐标系场景下更清晰。

position-area 和 position-anchor、anchor-name 怎么配合使用？

三者协同完成锚点定位：
1. 锚点元素声明 anchor-name: --my-anchor;，成为命名锚点；
2. 定位元素声明 position-anchor: --my-anchor;，引用该锚点（建立绑定关系）；
3. 定位元素声明 position-area: top center;，指定放入锚点 3x3 网格的哪个区域。
完整示例： .anchor { anchor-name: --tip; } .tooltip { position: absolute; position-anchor: --tip; position-area: top center; }。
注意：position-area 仅对"有默认锚点且为绝对/固定定位"的元素生效。没有 position-anchor 时，定位元素会查找最近的祖先锚点（隐式锚点），但显式声明 position-anchor 更清晰可控。

为什么用 position-area 定位 popover 时需要重置 margin 和 inset？

HTML [popover] 元素有默认 UA 样式： margin: auto 和 inset: 0，用于默认居中显示。这些默认值会与 position-area 的网格定位冲突—— margin:auto 会把元素拉向居中，inset:0 会覆盖网格区域定位。
解决方法：显式重置 margin: 0; 和 inset: auto;，让 position-area 生效。
示例： [popover] { position: fixed; position-anchor: --btn; position-area: bottom center; margin: 0; inset: auto; }。
这是 popover + position-area 组合的常见陷阱，CSS 工作组正在考虑未来版本自动处理此冲突。

position-area 的"默认对齐行为"是什么意思？为什么不用手动写 align/justify？

position-area 有"调整默认行为"特性：当设置 position-area 后，self-alignment 属性（align-self/justify-self）的 normal 值会自动变为合理的对齐方向，无需手动声明：
1. 若某轴方向 position-area 指定的是居中区域，则该轴默认对齐为 anchor-center（相对锚点居中）；
2. 若指定的是起始/结束区域，则默认对齐为区域相反侧 （如 top 区域默认 align-self: end，让元素底部贴近锚点顶部）。
这意味着大多数场景下只需写 position-area 一行即可获得合理对齐，无需额外写 align-self/justify-self。只有需要自定义对齐时才覆盖默认值。

position-area 的浏览器兼容性如何？不支持时怎么降级？

position-area（原名 inset-area）目前属于Limited availability，Chrome 125+ / Edge 125+ 已支持， Firefox 与 Safari 在持续跟进中（规范仍在演进，属性名从 inset-area 改为 position-area）。
渐进降级方案：用 @supports (position-area: top center) 检测支持，不支持时回退到传统方案——anchor() 函数（需 Chromium）或 JavaScript 定位库（Floating UI / Popper.js）。
示例： @supports not (position-area: top) { .tooltip { top: anchor(bottom); left: anchor(left); } }。
由于规范仍在演进，建议生产环境配合 polyfill（如 css-anchor-positioning）或 JS 兜底方案使用。