绝对定位子元素不会自动对齐网格线，必须手动指定定位上下文并换算参考点；Grid容器默认position: static，不构成定位上下文，故top: 0; left: 0会锚定视口而非网格单元，需为对应网格项或容器显式添加position: relative。
绝对定位子元素不会自动对齐网格线，必须手动指定定位上下文并换算参考点——不加 position: relative，它就不是“在格子里”，而是“在页面里”。
为什么 top: 0; left: 0 没把元素钉在网格单元左上角？
因为 position: absolute 的元素只认最近的「已定位祖先」作为 containing block，而 Grid 容器默认是 position: static，不构成定位上下文。它会一路向上找，直到 ，所以 top: 0; left: 0 实际贴的是视口左上角。
- 必须给目标网格项（比如
.card或.header）加position: relative，才能让它成为该子元素的定位基准 - 如果想让所有绝对定位子元素都相对于整个 Grid 容器定位，那就给
.grid-container加position: relative，但要注意这会让所有子元素共享同一个参考系，容易互相覆盖 - 若网格项用了
display: contents，它无法承载定位上下文，必须额外包一层<div> 并设 <code>position: relativegrid-area和inset能一起用吗？不能直接绑定——
grid-area对position: absolute元素完全无效，浏览器会忽略它的声明；但你可以用grid-area命名区域，再给对应网格项加position: relative，此时inset或top/left的参考点就是该区域的 padding box。-
inset: 8px 12px auto auto等价于top: 8px; right: 12px，语义更清晰，现代浏览器（Chrome 110+、Firefox 106+、Safari 16.4+）支持良好 - 需要兼容 Safari 15.4 之前版本时，必须回退到
top/right等传统四值 -
inset的参考点始终是父级的 padding box，和 Grid 布局无关，也不会因grid-template-areas改变
怎么让绝对定位元素“看起来”对齐某条网格线（比如第 3 条列线）？
Subgrid 或
grid-column都不能让绝对定位元素自动感知轨道位置——它看不见网格线，只能靠你手动提供像素偏移或占位锚点。- 最轻量方案：在目标网格线位置放一个空的
position: relative占位元素，比如<div class="ref-col-3" style="position:relative;height:0"></div>，然后让按钮position: absolute挂在这个元素下 - 动态方案：用 JS 读取
getComputedStyle(gridContainer).gridTemplateColumns，解析出第 3 条列线的累计宽度，再设left值；需配合MutationObserver和 resize throttle - 别试图写
grid-column: 3 / 3; top: 0—— 后者会直接覆盖前者的逻辑，且grid-column在这里根本不起作用
为什么设置了
position: relative，元素还是被遮住了？因为
position: relative会创建新的层叠上下文（stacking context），如果父网格项的z-index太低，或者兄弟元素有更高层级的层叠上下文（比如带transform或filter），就会压住你的绝对定位子元素。- 检查该网格项是否设置了
z-index，哪怕只是z-index: 0也能确保它参与层叠顺序计算 - 避免在同一个网格项上同时用
transform和position: relative，除非你明确需要那个新层叠上下文 - DevTools 里看
Computed面板中的z-index是否生效，以及Stacking Context是否意外被触发
真正难的不是写对
inset，而是搞清「它到底以谁为参考」——浏览器不会告诉你当前 containing block 是哪个元素，得靠 DevTools 的 Layout 面板逐层点开看position值，再结合offsetParent判断。 -
