Grid容器结合absolute定位时，需将容器设为relative，使绝对定位元素以其为参考点。.overlay等脱离文档流的元素不参与网格布局，常用于角标、弹窗等叠加效果，提升布局灵活性。
在某些布局场景中，你可能会考虑将 CSS Grid 布局与 absolute 定位结合使用。虽然它们属于不同的定位机制，但在特定情况下可以协同工作。关键在于理解它们的作用层级和容器关系。
Grid 容器中的绝对定位元素
当一个元素使用 position: absolute 时，它会脱离正常的文档流。但如果它的祖先中有一个是 grid 容器（display: grid），并且该祖先设置了 position: relative 或其他非 static 定位，那么绝对定位元素将以这个祖先为参考点进行定位。
常见情况：
- Grid 容器设为 position: relative
- Grid 项目中某个子元素使用 position: absolute
- 绝对定位元素不再参与网格布局，但可以覆盖在网格的某个区域上
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr;
position: relative; /* 重要：作为绝对定位的参考 */
height: 400px;
}
<p>.overlay {
position: absolute;
top: 20px;
right: 20px;
background: red;
color: white;
padding: 10px;
}</p>上面的 .overlay 元素会相对于整个网格容器定位，出现在右上角，不占用任何网格轨道。
绝对定位元素是否还能参与 Grid 布局？
不能。 一旦元素设置为 position: absolute，它就完全脱离了 Grid 的布局系统。它不会占据网格轨道，也不会影响其他项目的排列。
注意点：
- 即使你把
position: absolute的元素放在 grid item 内部，它本身也不受 grid-template-areas 或 grid-column 等属性控制 - 你可以用 grid 来布局结构，再用 absolute 实现弹窗、提示、角标等“叠加”效果
实用场景举例
这种组合常用于以下情况：
- 在网格卡片的右上角添加“收藏”或“新”标签
- 模态框或通知浮层覆盖在整体布局之上
- 固定位置的返回顶部按钮，但页面主体使用 grid 布局
例如：一个图片网格，每张图片右上角有一个星标图标，可以用 absolute 定位实现，而图片列表本身由 grid 排列。
基本上就这些。Grid 负责整体结构，absolute 负责局部自由定位，两者配合得当能提升布局灵活性。关键是别忘了给 grid 容器加 position: relative，否则 absolute 可能相对视口或更外层元素定位，造成意外偏移。
