Grid容器需设position: relative，否则绝对定位元素会脱离网格以body为基准；要锚定网格项内部，须给该项自身设position: relative。
Grid容器必须设position: relative
绝对定位元素飞出网格、贴到视口左上角，90%是因为忘了这一步。Grid容器默认是position: static，而position: absolute只认非static的祖先作为包含块——不加position: relative，它就一路往上找到body为止。
加了之后，top: 0; left: 0才真正对齐网格容器的左上角（padding box起始点）。如果容器本身已是absolute或fixed，这步可跳过，但得确认它的父级没意外截断定位链。
常见错误：
-
.grid-container { display: grid; }—— 缺少position: relative，子元素position: absolute直接失效 - 在媒体查询里动态删掉
position: relative，导致响应式下定位突然偏移
想钉在某个网格单元内？给grid item加position: relative
光靠Grid容器设relative，只能让子元素相对于整个容器定位；要让它“粘”在某个卡片、某个header区域内部，必须把那个网格项自己变成定位上下文。
立即学习“前端免费学习笔记（深入）”；
比如一个.card占满一格，右上角加徽标：
.card {
grid-area: card;
position: relative; /* ✅ 关键 */
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}不加这行，.badge的top/right会从整个.grid-container算起，而不是.card的内边距边界。
注意点：
-
display: contents会让grid item无法承载定位上下文，得额外包一层div - 加了
position: relative会创建新的层叠上下文，如果.badge被遮挡，先查.card的z-index -
top: 0对齐的是padding上沿，不是border边缘；想贴边可用box-sizing: border-box或手动减去border-width
别信grid-area能自动锚定绝对定位元素
grid-area: header对position: absolute元素完全无效——它已脱离网格流，浏览器直接忽略该声明。命名区域只是逻辑分组，不生成包含块，也不提供定位基准。
想让元素出现在“header区域右上角”，唯一可靠方式是：给.header这个网格项加position: relative，再用inset或top/right偏移。
用线号（line number）替代命名区域更可控：
- 打开 Chrome DevTools → Styles 面板 → 点击
display: grid旁的蓝色图标 → 勾选 “Show line numbers” - 查到 header 区域对应
grid-row: 1 / 2，就写grid-row: 1; grid-column: 1;来锚定左上角交点 - 负值如
grid-column: -2适合右侧动态宽度场景，但别混用grid-column: 2 / 4和left: 100px——后者会覆盖前者的锚点逻辑
优先用inset，但留意兼容性与塌陷风险
inset: 8px比top: 8px; right: 8px; bottom: 8px; left: 8px更简洁、语义更清晰，且天然适配逻辑方向（比如 RTL 下自动翻转right/left）。但它在旧版 Safari 和部分 Android WebView 中不支持（2026年主流已覆盖，但若需兼容 iOS 15 以下，得降级）。
更隐蔽的问题是高度塌陷：绝对定位元素不参与父容器高度计算。如果.card里只有.badge一个内容，加了position: absolute后.card可能高为 0。
应对方法：
- 确保
.card有其他非absolute内容撑高 - 手动设
min-height，别依赖padding-bottom“假装”占位 - 若悬浮内容本该影响布局（如展开菜单），就别用
absolute，改用visibility: hidden+transform过渡
真正难的不是让元素浮起来，而是判断它该不该脱离文档流——Grid 负责结构，定位只负责“怎么浮”，混用的前提是分清责任边界。
