Grid 与 position 可混用但管辖权分离：Grid 控制结构归属，position 控制视觉坐标；absolute 子元素脱离网格流，需容器设 position: relative 创建定位锚点，relative 子元素仅视觉偏移而不影响布局。
能混用，但必须理解它们的“布局管辖权”完全分离——Grid 控制结构归属，position 控制视觉坐标，二者互不干涉，也不叠加生效。
Grid 容器内设 position: absolute 会脱离网格流
一旦某个子元素设置 position: absolute，它就立刻退出 Grid 的轨道分配系统：不再响应 grid-column、grid-area 或自动行/列放置规则，也不再占据任何网格空间。
- 它只认最近的“已定位祖先”（
position不是static）作为定位参考点 - 若 Grid 容器没加
position: relative，它可能直接相对于body或视口定位，导致飘出预期区域 - 其他网格项会无视它的存在，按原计划排布——它既不推挤别人，也不被别人推挤
为什么必须给 Grid 容器加 position: relative
这是混用时最常漏掉、也最致命的一环。不加这句，absolute 子元素的 top/right 就失去锚点。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
position: relative; /* ✅ 关键：创建包含块 */
}
.overlay {
position: absolute;
top: 8px;
right: 8px;
background: #e74c3c;
}- 没有
position: relative，.overlay可能飞到整个页面右上角，而非当前网格容器右上角 -
position: sticky或fixed不依赖此设置，但它们也不受 Grid 约束——fixed永远相对视口，sticky相对滚动容器
position: relative 的网格项仍属 Grid 流
和 absolute 不同，relative 只是“视觉偏移”，它在 Grid 中的位置、占位、行列归属全都不变。
立即学习“前端免费学习笔记（深入）”；
.card {
grid-column: 1 / -1;
position: relative;
top: -10px; /* 视觉上浮，但下方元素仍按原位置布局 */
}- 适合做微调：比如让标题略高于卡片边界，或让按钮轻微悬停感
- 不会影响其他项的网格计算，也不会触发重排（re-layout），比
transform更轻量（无 GPU 提升，但兼容性更好） - 注意：
z-index在这里有效，可用于控制叠层顺序
真正难的不是怎么写，而是判断该不该用——Grid 负责“它该在哪”，position 负责“它看起来在哪”。混用没问题，但把 position 当作 Grid 的补丁来修布局错位，往往说明 Grid 结构本身设计得不够清晰。
