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