按钮“看得见却点不了”是因上层元素的margin等盒模型属性在z轴覆盖了按钮可点击区域，而非边框遮挡；需通过outline验证、改margin为padding、检查overflow/position/z-index及清除浮动等方法修复。
按钮被遮挡不是边框本身的问题，而是盒模型中 margin、padding 和层叠顺序（z-index）共同作用的结果——尤其当浮动、固定高度或未清除的父容器存在时，视觉可见 ≠ 可点击。
为什么按钮“看得见却点不了”？
常见现象是：按钮渲染正常，鼠标悬停无反应，开发者工具里选中按钮后发现高亮区域错位或被截断。本质是上层元素（比如设置了 margin-top: 100px 的后续 <div>）的边界框向上延伸，覆盖了按钮的可点击区域。这不是边框（border）画出来挡住了，而是该元素的整个盒模型（含 margin）在 z 轴上压住了按钮。
-
margin是透明的，但它的空间仍参与文档流和层叠计算 - 浮动元素若未清除（
clear: both），父容器高度塌陷，导致后续元素定位异常 - 设置固定
height的容器内容溢出时，会直接盖住下方按钮，哪怕按钮 DOM 在它后面
怎么用 margin / padding 快速验证和修复？
别急着改 JS 或加 z-index，先用 CSS 盒模型属性做最小干预验证：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给按钮加临时
outline: 2px solid red，确认是否真被遮挡（而非事件绑定失败） - 把按钮的
margin改成padding：后者扩大按钮自身尺寸但不改变外部占位，常能绕过外层 margin 溢出问题 - 检查按钮父容器是否有
overflow: hidden或position: relative且没设z-index，这会让子元素被裁剪或层级受限 - 如果按钮右侧有浮动元素，尝试在按钮外层加
clear: right或用display: flex替代float
固定高度下拉框遮挡按钮怎么破？
典型场景：地址选择下拉区设了 height: 300px，但内容撑开后盖住下方的 #confirmarBtn。这不是 margin 能调好的事，得动布局逻辑：
立即学习“前端免费学习笔记（深入）”；
- 删掉下拉容器的固定
height，改用max-height: 300px+overflow-y: auto - 确保下拉容器和按钮不在同一个
position: relative父级里；否则它们共用一个 stacking context，z-index无效 - 给按钮加
position: relative和足够大的z-index: 10（注意：只在必要时用，优先靠文档流解决） - 避免用
margin-top把按钮“推”到可视区——它只是视觉位移，盒子边界仍在原处，仍可能遮挡
真正容易被忽略的点：盒模型里 margin 的合并行为（比如相邻块级元素上下 margin 会取最大值而非相加），以及 float 元素未清除时父容器高度为 0——这两者常让“看起来没重叠”的布局实际产生不可见的遮挡。动手前，先在开发者工具里逐层检查每个元素的 computed box 尺寸和 stacking order。
