grid容器需设position: relative以使绝对定位子元素相对于其定位，否则会向上查找定位祖先；绝对定位元素脱离网格流不占轨道空间，可用grid-area锚定到特定格子再绝对定位。
grid容器必须显式设为relative
绝对定位元素要相对于grid容器定位，前提是容器本身得是定位上下文。默认情况下grid容器不是position: relative，所以position: absolute的子元素会往上找最近的定位祖先，常导致偏移错乱。
常见错误现象：top: 0; left: 0没贴到网格单元左上角，而是跑到整个页面左上或父section里去了。
- 必须给grid容器加
position: relative（不能只靠display: grid） - 如果容器已有
position: absolute或fixed，就不用额外加relative，但要注意层级嵌套关系 - 不要在grid item上设
position: relative再放绝对定位子元素——那会创建新定位上下文，脱离grid轨道控制
绝对定位元素不占grid轨道空间
这是关键行为：用position: absolute的子元素完全脱离grid布局流，不会触发grid-template-rows重排，也不会撑开行高或列宽。
使用场景：悬浮操作按钮、状态角标、覆盖蒙层、tooltip箭头定位点。
立即学习“前端免费学习笔记（深入）”；
- 若需要它“参与”网格占位（比如让某行自动增高），就得改用
place-self+margin或transform模拟，而不是绝对定位 -
z-index依然有效，但只在同一个定位上下文中比较；跨grid容器时需看父级堆叠上下文 - 注意：
inset（如inset: 8px）在部分旧版Chrome中兼容性弱，建议拆成top/right/bottom/left
用grid-area配合absolute实现精准锚定
单纯靠top/left数值难对齐网格线，尤其响应式下容易偏移。更稳的方式是先用grid-area把元素“挂载”到目标格子，再在其内部做绝对定位。
参数差异：grid-area: header;比grid-row: 1; grid-column: 1 / -1;语义更强，也方便后续CSS变量注入。
- 给绝对定位元素设
grid-area，同时保留position: absolute，它仍脱离流，但位置参考系已绑定到该格子边界 - 此时
top: 0就是该格子的顶部，不是整个容器顶部——前提是容器已设position: relative - 避免对同一元素既设
grid-column又设left，CSS会忽略grid属性（absolute优先级更高）
header {
position: relative;
}
.header-badge {
position: absolute;
top: 8px;
right: 8px;
grid-area: header; /* 锚定到header区域，right才真正相对于它 */
}IE11及低版本Safari的fallback陷阱
IE11支持display: grid但不支持inset，也不识别grid-area作为定位锚点；Safari position: absolute在grid内行为有渲染bug，比如bottom: 0失效。
性能影响：绝对定位本身不触发布局重排，但若频繁修改top/left值，仍会触发合成层重绘——不如用transform: translate()平滑。
- 兼容方案：用
@supports (display: grid) and (position: absolute)包裹grid+absolute规则，外层用flex/fallback布局兜底 - 不要依赖
place-items: center+absolute混用，IE11下place-items无效，且absolute会直接飞走 - 真正在意兼容性时，宁可用
transform: translate(-50%, -50%)配合top: 50%; left: 50%，比纯inset稳得多
事情说清了就结束。最常被忽略的是：grid容器没设position: relative，和以为grid-area能自动让absolute子元素“对齐格子内容区”——其实它只定义了定位参考框，内容溢出或padding仍需手动计算。
