subgrid 无法让 absolute 元素直接锚定网格线，因其逻辑坐标不被定位系统识别；必须用 JS 读取轨道位置并手动设置 top/left，或改用 grid 原生定位——将元素作为父网格直接子项并用 grid-row/column 显式对齐。
subgrid 本身不提供“定位元素”能力，它只让子网格容器继承父网格的轨道线；想让 position: absolute 或 position: fixed 元素对齐外部网格，必须手动把网格线坐标转成可被定位系统消费的值——这一步没有自动映射。
为什么 position: absolute 元素无法直接锚定到 subgrid 线上？
Grid 的行线/列线（如 1、2、[label]）是布局上下文内的逻辑坐标，position 系统完全感知不到。浏览器不会把 grid-row: 2 自动转成 top: 48px 这类偏移值。
-
absolute元素脱离文档流，不参与任何网格轨道计算 - 即使父容器设了
grid-template-rows: auto 1fr auto，子元素用subgrid继承了这些线，也仅对其内部子项（如label、input）生效 - 开发者工具里能看到命名线，但
getComputedStyle(el).gridRowStart对absolute元素返回auto，不是实际行号
怎么让绝对定位元素视觉上“对齐”父网格线？
唯一可靠方式：用 JS 把父网格的轨道位置读出来，再赋给 top/left。CSS 本身做不到。
- 用
el.getGridFragments()（Chrome 127+ 支持）或el.getComputedStyle().gridRowStart+el.getBoundingClientRect()手动推算行起点 - 监听
resize和scroll，因为网格轨道位置会随内容、断点、滚动而变 - 避免用
offsetTop直接取值——它包含gap、border、padding，不是纯轨道偏移 - 示例思路：
const parent = document.querySelector('.form-grid');<br>const track = parent.getGridFragments('row')[1]; // 第二条行线起点<br>const tooltip = document.querySelector('.tooltip');<br>tooltip.style.top = `${track.start}px`;
有没有纯 CSS 替代方案？
有，但前提是放弃 position: absolute，改用 grid 原生定位能力——这才是 subgrid 设计的本意。
- 把需要“定位”的元素（如提示气泡、悬浮按钮）作为父网格的**直接子项**，用
grid-column/grid-row显式指定轨道位置 - 如果它必须嵌套在子组件内，确保该子组件是
display: grid+grid-template-rows: subgrid+grid-row: span N，然后其子元素直接用grid-row: 2锚定 - 不要用
display: contents包裹——它会让元素失去 DOM 子项身份，subgrid失效 - 命名线可复用：
.tooltip { grid-row: hint; }只要父容器定义了grid-template-rows: [label] auto [input] 1fr [hint] auto
真正难的不是写 grid-template-rows: subgrid，而是让所有参与对齐的元素都落在同一套轨道坐标系里——DOM 层级不能断、父轨道必须显式、中间层不能加 gap 或 auto 行。一旦用了 position，就等于主动退出这个坐标系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
