移动端标题与按钮重叠主因是flex布局语义混乱，应优先用flex-wrap+gap替代column；必须用column时需设min-height、align-items和justify-content；点击误触须用pointer-events而非z-index解决。

移动端标题与按钮重叠的典型表现

在 ≤600px 断点下，flex-direction: column 会让标题和按钮垂直堆叠，但若两者都设了 position: relative 或未约束内边距/行高，视觉上可能“挤在一起”甚至错位重叠；更隐蔽的是：开发者工具里鼠标悬停显示的 bounding box 覆盖了相邻元素，导致点击误触——表面是重叠，实则是布局容器语义混乱。

用 flex-wrap + gap 替代强行垂直排列

别一上来就切 column。先保留 display: flex，加 flex-wrap: wrap 让它们在窄屏自动换行，再用 gap 控制间距，比靠 margin 更稳定：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• gap 不受父容器 overflow: hidden 影响，而 margin 在某些 flex 容器里会被忽略
• 标题用 flex: 1 1 auto 占满可用宽度，按钮保持 flex: 0 0 auto，避免换行后按钮被拉宽
• 清除 h2 和 button 的默认 margin，统一 line-height: 1.4 防止基线错位

当必须用 column 时，用 min-height 和 align-items 锁定空间

如果设计强制要求标题在上、按钮在下（比如弹窗头部），直接切 column 后容易因内容高度波动导致按钮“上浮”盖住标题。此时要主动预留空间：

• 给容器设 min-height: 60px（≈ 标题行高 + 按钮高度 + gap）
• 用 align-items: flex-start 防止按钮因内容少而上移，再配 justify-content: space-between 拉开距离
• 避免对按钮单独设 margin-top —— 它在 column 下可能被折叠，改用 gap 或父容器 padding

z-index 不是解药，pointer-events 才管点击穿透

重叠本身不致命，致命的是点击区域错乱。比如关闭按钮盖在标题右上角，点标题文字却触发了按钮。这时：

• 不要盲目加 z-index：按钮和标题若不在同一层叠上下文里，z-index 无效
• 若按钮纯装饰（如 badge），加 pointer-events: none 让点击穿透到下层
• 若按钮需响应点击，标题加 pointer-events: none，或用 event.stopPropagation() 隔离事件
• 检查父容器是否设了 overflow: hidden —— 它会裁剪子元素，让看似重叠的区域实际不可交互

真正麻烦的是多层嵌套中，一个 transform 或 opacity 就悄悄创建了新层叠上下文，让所有 z-index 失效。这时候得回退一步，用结构分离代替样式覆盖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！