关键一步是给目标网格单元格（如.card）设position: relative，使其成为绝对定位子元素的定位上下文；若只设Grid容器为relative，则所有absolute子项均以整个容器为基准，丧失局部锚定能力。
Grid 负责整体结构划分，position 负责局部精确定位；两者不是替代关系，而是分工协作——Grid 搭骨架，position 做微调。
为什么 grid 容器里加 position: relative 是关键一步
绝对定位元素（如 position: absolute）默认往上找最近的「已定位祖先」作为包含块。Grid 容器本身是 display: grid，但若没设 position 属性，它仍是 static，无法充当包含块。
常见错误现象：按钮或角标飘到视口左上角、脱离预期区域、响应式下错位。
- 必须给目标 Grid 单元格（比如
.main或.card）显式设置position: relative - 不能只给 Grid 容器（
.container）设position: relative，除非你希望所有绝对定位子项都相对于整个网格容器定位 - 如果单元格内有多个需定位的子元素，统一用同一个
position: relative父容器包裹，避免嵌套定位干扰
z-index 在 Grid + position 混合场景中为何经常失效
z-index 只在「定位上下文」中生效——即父元素 position 值为 relative、absolute、fixed 或 sticky 时才起作用。Grid 本身不自动创建层叠上下文。
立即学习“前端免费学习笔记（深入）”；
典型问题：角标（.badge）被卡片内容盖住、模态框弹不出、返回顶部按钮点不到。
- 给承载
position: absolute元素的父容器加position: relative，再设z-index: 1 - 绝对定位子元素自身也要设
z-index（如z-index: 2），数值无需很大，1 和 2 就够区分层级 - 避免用负
z-index，尤其当父容器有overflow: hidden时，可能直接裁掉元素 - 不要混用
grid-area和position: absolute控制同一元素的位置——语义冲突，行为不可控
固定定位导航栏（position: fixed）和 Grid 内容重叠怎么破
导航栏脱离文档流后，Grid 内容会从页面顶部开始渲染，直接被遮挡。这不是 Grid 的 bug，而是布局空间没预留。
错误做法：给第一个 Grid 区域加 margin-top 或 padding-top —— 在不同屏幕高度或缩放下容易失准。
- 用 Flexbox 把页面拆成两层：
header（position: fixed） +main（flex: 1，设overflow-y: auto） -
main内部再设display: grid，Grid 高度由 Flex 容器撑开，自然避开 fixed 导航栏 - 确保
main有margin-top等于导航栏高度，且该值与导航栏height保持同步（推荐 CSS 自定义属性或 JS 同步） - 测试时注意移动端 Safari 的 viewport 行为，
height: 100vh在地址栏收起/展开时会跳变
真正难的不是写几行 grid-template-areas 或 top: 10px，而是判断哪个元素该承担「定位锚点」、哪一层该管「空间预留」、哪个 z-index 值会意外被父级截断——这些边界条件，往往只在真机横竖屏切换或缩放时才暴露出来。
