负边距导致重叠内容被裁切或错乱，因容器不自动扩容且可能有 overflow: hidden；需用 position + z-index 控制层叠，或 grid-row/column 精准定位共享轨道。
负边距让网格项重叠时，为什么内容被裁切或布局错乱？
负边距本身不破坏网格容器的布局计算，但会把子项“物理推离”原本位置，而容器不会自动扩容或重绘溢出区域。常见现象是 overflow: hidden（父容器默认无此设置，但某些 UI 框架或重置样式会加）、文字被截断、点击热区偏移。
- 确保父容器没设
overflow: hidden或clip-path，否则重叠部分直接不可见 - 用
z-index控制层叠顺序，但注意：只有定位元素（position: relative/absolute/fixed）才生效，纯grid项需显式加position: relative - 负边距值建议用
px或em，避免用%——它基于父容器宽度计算，在响应式中易失控 - 示例：让第二项上移 20px 覆盖第一项底部
.item-2 { margin-top: -20px; position: relative; z-index: 1; }
用 grid-row / grid-column 指定起止线实现精准重叠
这是更可控的方式：不依赖视觉偏移，而是让多个项共享同一网格轨道区间。浏览器按 DOM 顺序渲染，后出现的项自然压在前面项之上（除非改 z-index）。
- 显式写
grid-row: 2 / 4和grid-column: 1 / 3，比只写起点（如grid-row: 2）更安全——隐式终点可能因grid-auto-flow变化而漂移 - 若用命名线（如
grid-row: header / main），务必确认这些名字已在grid-template-rows中定义，否则整条规则失效且无报错 - 重叠项若含表单控件（如
<input>），需注意焦点顺序仍按 DOM 流，视觉遮挡 ≠ 交互禁用 - 示例：两列布局中让标题横跨并覆盖左侧头像
.title { grid-row: 1; grid-column: 1 / -1; }
重叠后鼠标事件穿透问题怎么破？
默认情况下，上层元素会拦截 pointer-events，下层无法响应 hover/click。这不是 bug，是 CSS 规范行为。
- 给上层项设
pointer-events: none，可透传事件到底层——但整个元素变“不可点”，包括它自己的文字、链接等 - 更稳妥的做法：只对重叠区域的特定子元素设
pointer-events: none（比如覆盖用的装饰性伪元素::before），主体内容保持可交互 - 若需“半透”效果（如上层半透明遮罩 + 下层可点），用
rgba()或opacity，别动pointer-events - 调试技巧：在 DevTools 中勾选 “Show hit areas”（Chrome 120+），直观看到哪些区域实际响应事件
Grid 重叠在 Flexbox 替代方案里为何更难控制？
Flexbox 本身没有“轨道坐标”概念，强行用 position: absolute 或负 margin 实现重叠，会脱离文档流，导致父容器高度塌陷、响应式断裂、与兄弟元素间距失控。
立即学习“前端免费学习笔记（深入）”；
- Grid 的
grid-row/grid-column是声明式定位，语义清晰；Flexbox 的重叠靠副作用达成，维护成本高 - Flex 容器设
flex-wrap: wrap后，负边距可能引发意外换行，而 Grid 的grid-auto-flow对重叠更鲁棒 - 如果项目已用 Flex 布局，又必须重叠，优先考虑加一层
position: relative包裹，再用绝对定位子项——但这就不是“Flex 实现重叠”，而是“Flex + 定位混合”了
grid-row 还是改用 margin？这些细节没人报错，但用户一碰就感知得到。 
