绝对定位元素未按 grid cell 定位，是因为其参考系是最近的已定位祖先而非 grid cell；需为对应 grid item 显式设置 position: relative 才能使其成为定位上下文。
绝对定位元素为什么没按 grid cell 定位？
因为 position: absolute 的参考系是**最近的已定位祖先（即 position 为 relative、absolute、fixed 或 sticky 的祖先）**，不是 grid cell 本身。即使 grid 容器设了 position: relative，它的子元素（grid item）若未显式设定位上下文，就不会成为绝对定位元素的“容器边界”。
常见错误现象：top: 0; left: 0 把元素贴到整个 grid 容器左上角，而不是它所在 grid cell 的左上角。
- grid 容器设
position: relative是必要但不充分条件 - 真正起作用的是：**该 grid item 自身必须是已定位元素**（比如加
position: relative） - 否则，绝对定位元素会继续向上找，直到找到 grid 容器（或更外层）为止
grid item 上必须加 position: relative 吗？
是的，绝大多数情况下需要。这是让 grid cell 成为定位上下文的关键一步。
示例场景：在一个 grid-area: header 的 item 里放一个右上角关闭按钮，希望它相对于这个 header 区域定位：
.header {
grid-area: header;
position: relative; /* ✅ 必须加 */
}
<p>.close-btn {
position: absolute;
top: 8px;
right: 8px;
}</p>
- 不加
position: relative到.header，.close-btn的top/right会相对于整个 grid 容器计算 -
position: relative不改变布局流，只创建定位上下文，安全无副作用 - 如果 grid item 本身用了
display: contents，则无法承载定位上下文——此时需额外包裹一层div并设position: relative
用 grid-area 名称做定位基准可行吗？
不可行。grid-area 只是命名区域，不产生 DOM 节点，也不创建包含块（containing block）。CSS 中没有任何机制支持“相对于 named grid area 定位”。
有人误以为设置 grid-area: sidebar 后，里面 position: absolute 元素就能自动对齐 sidebar 边界——实际不会。
- 所有定位都基于**元素自身的定位上下文**，和
grid-area值无关 - 想实现“某区域内的绝对定位”，唯一可靠路径：给该区域对应的 grid item 加
position: relative - 若需动态控制多个 cell 的定位行为，建议用 class 批量处理，而非依赖 area 名
性能与兼容性要注意什么？
在 grid item 上加 position: relative 几乎无性能代价，现代浏览器对此优化得很好。但有两个易忽略点：
- IE11 对
display: grid+position: absolute组合有渲染 bug：绝对定位元素可能错位或消失，必须配合transform: translateZ(0)强制硬件加速（仅限 IE11） - 如果 grid item 内部有大量绝对定位子元素，且频繁变更
top/left，建议改用transform: translate()避免重排（尤其是动画场景） - 不要为了“看起来像相对 grid cell 定位”而滥用
margin或calc()模拟，语义不清且难维护
最常被跳过的动作，就是忘了给 grid item 加那行 position: relative —— 它不报错，但定位结果完全不符合预期，调试时容易绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
