position-area 的九宫格摆位
anchor() 页的函数式写法精确但繁琐，居中还要另配 translate。position-area 是它的简化封装：把锚周围看成 3×3 网格，只需指定放哪一格，inset 与 translate 都不必触碰，浏览器负责对齐。
CSS.supports() 探测。1 · 锚周围的 3×3 网格
锚自己占正中格，它把包含块切成 9 块：上中下三排乘左中右三列。position-area: top center 是正上方那格，bottom right 是右下角那格。
top / left 如何映射到 block-start / inline-start（这一套随书写方向与 RTL 自动镜像）。
注 · 选中的格子成为浮层新的包含块。position-area 不直接给浮层写坐标，而是把选中的那一格（或跨格区域）当作浮层的包含块，再用 justify-self / align-self 在这块里摆位。§2 的 span-* 能铺满、§3 的
anchor-center 能精准对齐锚，都出自这一层：格子变大之后，浮层在格子里怎么放是下一层的事。
2 · span 跨格与逻辑关键字
position-area 的取值不止 9 格，图 1-1 的预设按钮可逐一对照：
span-*跨格：top span-all贴上边而横向铺满整条；top span-left占上方中格与上方左格两块。- 逻辑关键字：
block-start/block-end/inline-start/inline-end随书写方向走，RTL 与竖排自动镜像。 - 单关键字简写：只写一个轴，另一轴取
span-all。top等价于top span-all，即贴上边且横向铺满。 center：覆在锚的正上方，可用于做高亮蒙层。
3 · 格内落点与 justify-self / align-self
选定格子（即新包含块）之后，浮层在这块里的落点由 justify-self（横轴）与 align-self（纵轴）决定：
normal是默认值，把浮层尽量贴近锚，多数场景无需手动调整。anchor-center对齐的是锚自身在该轴上的中心，center对齐的是所选区域的中心。格子比锚宽很多时（例如span-all）两者明显错开：要正对着锚用前者，要在整片区域内居中才用后者。start/end在格子里靠首或靠尾，随书写方向走。stretch把浮层沿该轴拉伸铺满，适合横幅与满宽提示条。
建议 ·「贴上下左右加居中」这类菜单与 tooltip，直接写一行 position-area 最省事；需要像素级精细控制（贴某条边再偏移几像素、跨边非对称、混合百分比）时回到 anchor()。两者底层同源，可以混用。
警示 · 这个属性早期在 Chromium 里叫 inset-area，2024 年改名为 position-area，值语法不变。旧文章里仍可能见到旧名，但它已不再是可用的别名：实测 Chrome 151 的 CSS.supports('inset-area', 'top center') 返回 false（核对于 2026-08）。
延伸的取值速查见细节与边界页 §7。可视化选择器 anchor-tool.com 与 css-tip.com 分别提供了点格取值与全部区域组合的对照，适合调试摆位时对参。