按钮被遮挡点击无效怎么解决

在你提供的注册表单中，ID 检查按钮能正常工作，而 Email 检查按钮点击无效，根本原因并非 style 属性本身导致功能失效，而是 CSS 布局引发的「点击区域被遮挡」问题。具体分析如下：

? 问题定位：Z 轴覆盖 + 浮动未清除

• 两个检查按钮均使用 style="position:relative; float:right; margin-top:5px"，使其右对齐于输入框右侧。
• Bootstrap 的 .mb-3（即 margin-bottom: 1rem）作用于包含 、<input> 和 的
  上。
• 关键隐患：Email 检查按钮所在
  下方紧邻的是注册按钮所在的

  ，而该

  应用了 margin-top: 100px —— 这个巨大的上边距并未“推开”上方容器，反而使该

  的边界框（bounding box）向上延伸并覆盖了 Email 按钮的可点击区域（尤其是按钮右半部分），造成「看起来能点、实则点不中」的假象。

✅ 验证方式：在浏览器开发者工具中选中 Email 检查按钮，观察其 :hover 状态是否触发；再尝试选中其上方/下方的

，你会发现鼠标悬停时高亮区域已覆盖按钮位置。

✅ 推荐解决方案（按优先级排序）

方案 1：清除浮动 + 规范布局（最健壮）

为每个含 float:right 的检查按钮容器添加清除浮动，避免父容器高度塌陷，并统一控制间距：

<div class="mb-4">
  <label for="id" class="form-label">ID</label>
  &lt;input name=&quot;id&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;id&quot; placeholder=&quot;~~~&quot;&gt;
  <button type="button" class="btn btn-secondary" onclick="checkIDDuplication()">
    ID duplication check
  </button>
  <div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

<div class="mb-4">
  <label for="email" class="form-label">Email</label>
  &lt;input name=&quot;email&quot; type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;~~~&quot;&gt;
  <button type="button" class="btn btn-secondary" onclick="checkEmailDuplication()">
    Email Duplication check
  </button>
  <div style="clear: both;"></div>
</div>

同时移除所有 float: right 和 position: relative，改用 Flex 布局实现右对齐（更现代、更可靠）：

<!-- 替代写法（推荐） -->
<div class="mb-4 d-flex align-items-center">
  <label for="email" class="form-label me-2">Email</label>
  &lt;input name=&quot;email&quot; type=&quot;text&quot; class=&quot;form-control flex-grow-1 me-2&quot; id=&quot;email&quot; placeholder=&quot;~~~&quot;&gt;
  <button type="button" class="btn btn-secondary" onclick="checkEmailDuplication()">
    Email Duplication check
  </button>
</div>

方案 2：调整外边距层级（快速修复）

如需最小改动，可将注册按钮所在

<!-- 修改前（危险） -->
<div class="col text-center">
  <button type="button" id="signup-button" class="btn btn-primary mb-3" style="margin-top: 100px;">Register!</button>
</div>

<!-- 修改后（安全） -->
<div class="col text-center pt-5"> <!-- 将垂直空间上移至容器 -->
  <button type="button" id="signup-button" class="btn btn-primary mb-3">Register!</button>
</div>

<button type="button" 
        class="btn btn-secondary" 
        onclick="checkEmailDuplication()" 
        style="position:relative; float:right; margin-top:5px; z-index:10;">
  Email Duplication check
</button>