子元素重叠导致点击失效时，应先检查页面结构确认遮挡情况，使用开发者工具临时禁用 pointer-events 或添加轮廓观察实际占位；通过合理设置 z-index（需配合定位属性）控制层级，避免滥用高数值，建议按模块分层；优先调整布局结构，如用 padding 替代负 margin，采用 flex 或 grid 布局减少绝对定位冲突，从根本上降低重叠风险。
子元素重叠导致点击失效，通常是因为上层元素覆盖了下层可交互元素，造成事件无法触发。解决这类问题不能只依赖 padding 或 z-index，而需要结合布局调整与层级控制来重新规划结构。
检查元素是否被遮挡
使用浏览器开发者工具（F12）查看页面结构，确认点击区域是否被其他元素覆盖。即使视觉上不明显，透明或部分重叠的盒子也可能拦截鼠标事件。
- 选中疑似遮挡元素，在 Styles 面板临时设置 pointer-events: none 测试底层元素是否恢复响应
- 或者临时添加边框、背景色（如 outline: 1px solid red）观察实际占位
合理使用 z-index 控制层级
确保可点击元素处于正确视觉层级。若父容器或兄弟元素 z-index 过高，会整体抬升其堆叠顺序。
- 为需要响应交互的子元素设置相对较高的 z-index，但前提是父级已定位（position: relative / absolute / fixed）
- 避免全局滥用高 z-index 值（如 9999），建议按模块分层管理，例如：弹窗 > 导航 > 内容
用 padding 替代负 margin 避免挤压
负 margin 容易引起盒模型重叠，尤其在响应式布局中更难控制。通过调整父级 padding 来腾出空间，使子元素自然分布。
立即学习“前端免费学习笔记（深入）”；
- 将原本靠负值“拉出来”的子元素改为父容器留白，例如用 padding-top 代替 margin-top: -20px
- 结合 box-sizing: border-box 精确控制尺寸，防止 padding 引发溢出
重构布局减少依赖层级
过度依赖 z-index 是治标，优化结构才是治本。考虑使用更现代的布局方式降低重叠风险。
基本上就这些。关键不是强行提升某个元素的层级，而是理清视觉层次与事件流的关系。调整 padding 和 z-index 只是手段，重新思考布局逻辑才能避免类似问题反复出现。
