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 中的位置、占位、行列归属全都不变。
