position-area · 九宫格

position-area：一行实现的九宫格摆位

anchor() 页的函数式写法强大但繁琐——居中还得配 translate。position-area 是它的「简化封装」：把锚周围想成 3×3 网格，你只需指定放哪格，top/left/translate 全部无需触碰，浏览器自动算好对齐。

1 · 心智模型：锚周围的 3×3 网格

锚自己占正中格。它把整个包含块切成 9 块：上方一排 / 中间一排 / 下方一排 × 左中右三列。position-area: top center = 放正上方那格；bottom right = 右下角那格。点下面网格任意格子，右边浮层立刻移动过去。还能切换到逻辑关键字，观察每格的 top/left 如何对应到 block-start/inline-start（这套会随书写方向 / RTL 自动镜像）：

底层机制：选中的格子 = 浮层新的「包含块」。 position-area 不是直接给浮层写坐标，而是把你选中的那一格（或跨格区域）当成浮层的包含块，再用 justify-self / align-self 在这块里摆位。这正是下面 span-* 跨格能铺满、以及 anchor-center 能精准对齐锚的原因——格子变大了，浮层在格子里怎么放才是下一层的事。

2 · 进阶值：span 跨格、逻辑关键字、单关键字

position-area 的值不止 9 格，上面 demo 的预设按钮可逐一尝试：

span-* 跨格： top span-all = 贴上边但横向铺满整条；top span-left = 占上方中格 + 上方左格两块。
逻辑关键字： block-start/block-end/inline-start/inline-end 跟着书写方向走（RTL / 竖排自动镜像），比 top/left 更国际化。
单关键字简写： 只写一个轴，另一轴默认 span-all。如 top ≈ top span-all（贴上边、横向铺满）。
center: 覆在锚正上方（做高亮蒙层之类）。

3 · 关键搭档：在格子里怎么摆——justify-self / align-self

选好格子（=新包含块）后，浮层在这块里的落点由 justify-self（横轴）/ align-self（纵轴）决定。上面 demo 里的 justify / align 按钮把两轴一起切换，选一个 span 值再逐个点过去，落点差异一目了然：

normal（默认）： 把浮层尽量贴近锚。多数场景都用它，无需手动调对齐。
anchor-center vs center（关键区别）： center 对齐的是所选区域（格子）的中心;anchor-center 对齐的是锚自身在该轴上的中心。当格子比锚宽很多（如 span-all）时两者会明显错开——想"正对着锚"用 anchor-center，想"在这片区域内居中"才用 center。
start / end: 在格子里靠首 / 靠尾（跟书写方向走）。
stretch: 把浮层拉伸铺满该轴——做横幅 / 满宽提示条时使用，平时较少用到。

position-area vs anchor()：怎么选？ 多数「贴上 / 下 / 左 / 右 + 居中」的菜单 tooltip，直接 position-area 一行最简便；需要像素级精细（贴某条边再偏移几 px、跨边非对称、混合百分比）时回到 anchor()。两者底层同源，可混用。

历史名 inset-area: 这个属性早期叫 inset-area,2024 年改名为 position-area。旧 Chromium、旧文章里可能还会见到 inset-area——值语法一致，认得即可。

在线速查工具： anchor-tool.com 是一个可视化的 position-area 选择器——点九宫格里任意一格，实时预览浮层落点并直接给出对应的 position-area CSS，和本页的网格 demo 思路一致，适合现场调试摆位时对照取值。

延伸阅读： css-tip.com/position-area 用一个可拖拽 demo 罗列了全部 36 种区域组合（1~9 格），并细讲 justify-self / align-self 各取值的差异——想把本页的对齐取值挨个对照着看，这篇是好补充。