如何用CSS Grid实现元素重叠效果？

用 grid-area 或 grid-column/grid-row 可实现元素重叠，无需 absolute 定位；重叠顺序由 HTML 书写顺序决定，z-index 需配合 position: relative 才生效；需注意 overflow 裁剪、层叠上下文及可访问性问题。

直接用 grid-area 或 grid-column/grid-row 把多个元素塞进同一网格区域，就能重叠——不需要 position: absolute，也不用手动算偏移。

让两个元素完全重叠：用相同的 grid-area 名称

这是最直观的方式，适合语义明确、结构固定的覆盖场景（比如搜索面板盖在主内容上）。

1. 父容器必须声明 display: grid 和 grid-template-areas，且命名区域要真实存在
2. 子元素设置相同 grid-area 值，例如都设为 "overlay"
3. 重叠顺序由 HTML 中的书写顺序决定：后写的元素默认在上层
4. 如果想强制某一个在顶层，给它加 z-index: 2；底层元素可设 z-index: 1 或不设（默认为 0）
5. 注意：grid-area: "overlay" 若没在 grid-template-areas 里定义，元素会回退到自动定位，可能错位或不显示

实现局部重叠：用 grid-column 和 grid-row 控制行列范围

比命名区域更灵活，适合需要错位覆盖、部分交叠的场景（比如卡片右下角叠加标签）。

1. 两个元素的行列范围只要存在交集，就会产生视觉重叠，例如：

   .a { grid-row: 1 / 3; grid-column: 1 / 3; }

   .b { grid-row: 2 / 4; grid-column: 2 / 4; }

2. 推荐显式写起止线（如 2 / 4），避免只写起点（如 2），后者等价于 2 / 3，容易误判跨度
3. 支持负值：grid-column: -2 / -1 表示倒数第二列到最后一列
4. 用 span 更易维护：grid-column: 2 / span 2 比 2 / 4 更清晰表达“从第 2 列开始占 2 格”

z-index 不生效？检查是否漏了定位上下文

Grid 子项默认是 position: static，此时 z-index 被忽略——这不是 bug，是 CSS 层叠规则本身的要求。

1. 必须给需要控制层级的子元素显式设置 position: relative（或 absolute、sticky）
2. 父容器不需要加 position: relative 来“启用”子项的 z-index，子项自己定位即可
3. 如果用了 position: absolute，它会脱离网格轨道尺寸，需手动设宽高或用 inset: 0 填满所在格子
4. z-index 值不用很大，1 和 2 就足够区分层级；负值慎用，可能被父容器裁切

重叠“看不见”？优先排查 overflow 和渲染上下文

重叠本身不会触发裁剪，但常见配置会让内容意外消失。

1. 父容器或任意上级设置了 overflow: hidden 或 clip-path，会直接截掉溢出部分
2. 浏览器 DevTools 的 “Show grid areas” 和 “Show line numbers” 必须打开，否则很难确认实际占位
3. 给重叠项临时加 outline: 2px dashed red（不占布局空间）和半透明背景，能快速验证覆盖范围
4. Grid 容器自身创建独立的层叠上下文，子项 z-index 只在该容器内有效；跨容器覆盖（比如弹窗盖住 Grid 卡片）得靠容器自身的 z-index

真正难的不是让它们叠上去，而是叠上去之后点击事件是否准确、键盘焦点是否合理、屏幕阅读器能否正确播报——这些没法靠 CSS 自动解决。