用 grid-area 或 grid-column/grid-row 可实现元素重叠，无需 absolute 定位；重叠顺序由 html 书写顺序决定，z-index 需配合 position: relative 才生效；需注意 overflow 裁剪、层叠上下文及可访问性问题。
grid-area 或 grid-column/grid-row 把多个元素塞进同一网格区域，就能重叠——不需要 position: absolute，也不用手动算偏移。
让两个元素完全重叠：用相同的 grid-area 名称
这是最直观的方式，适合语义明确、结构固定的覆盖场景（比如搜索面板盖在主内容上）。
- 父容器必须声明
display: grid和grid-template-areas，且命名区域要真实存在 - 子元素设置相同
grid-area值，例如都设为"overlay" - 重叠顺序由 HTML 中的书写顺序决定：后写的元素默认在上层
- 如果想强制某一个在顶层，给它加
z-index: 2；底层元素可设z-index: 1或不设（默认为 0） - 注意：
grid-area: "overlay"若没在grid-template-areas里定义，元素会回退到自动定位，可能错位或不显示
实现局部重叠：用 grid-column 和 grid-row 控制行列范围
比命名区域更灵活，适合需要错位覆盖、部分交叠的场景（比如卡片右下角叠加标签）。
- 两个元素的行列范围只要存在交集，就会产生视觉重叠，例如：
.a { grid-row: 1 / 3; grid-column: 1 / 3; }.b { grid-row: 2 / 4; grid-column: 2 / 4; } - 推荐显式写起止线（如
2 / 4），避免只写起点（如2），后者等价于2 / 3，容易误判跨度 - 支持负值：
grid-column: -2 / -1表示倒数第二列到最后一列 - 用
span更易维护：grid-column: 2 / span 2比2 / 4更清晰表达“从第 2 列开始占 2 格”
z-index 不生效？检查是否漏了定位上下文
Grid 子项默认是 position: static，此时 z-index 被忽略——这不是 bug，是 CSS 层叠规则本身的要求。
- 必须给需要控制层级的子元素显式设置
position: relative（或absolute、sticky） - 父容器不需要加
position: relative来“启用”子项的z-index，子项自己定位即可 - 如果用了
position: absolute，它会脱离网格轨道尺寸，需手动设宽高或用inset: 0填满所在格子 -
z-index值不用很大，1和2就足够区分层级；负值慎用，可能被父容器裁切
重叠“看不见”？优先排查 overflow 和渲染上下文
重叠本身不会触发裁剪，但常见配置会让内容意外消失。
- 父容器或任意上级设置了
overflow: hidden或clip-path，会直接截掉溢出部分 - 浏览器 DevTools 的 “Show grid areas” 和 “Show line numbers” 必须打开，否则很难确认实际占位
- 给重叠项临时加
outline: 2px dashed red（不占布局空间）和半透明背景，能快速验证覆盖范围 - Grid 容器自身创建独立的层叠上下文，子项
z-index只在该容器内有效；跨容器覆盖（比如弹窗盖住 Grid 卡片）得靠容器自身的z-index
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
