输入框获焦时覆盖按钮问题求助（附相关代码）

嘿，我来帮你搞定这个输入框盖住按钮的问题～咱们先看看代码里的问题出在哪儿：

• 按钮用了position: fixed，这个定位会让按钮脱离正常文档流，不再受父元素.input-group的约束，再加上margin-left: -100px的偏移，很容易和输入框重叠。
• 输入框的padding:22px设置得比较大，而且没有和按钮做合理的布局对齐，这也加剧了覆盖的问题。
• 按钮外层多嵌套了一层<div>，反而打乱了输入组的布局结构。

下面是修复后的完整代码，我用Flex布局让输入框和按钮完美对齐，同时调整样式彻底解决覆盖问题：

修复后的CSS #

.input-group {
  display: flex; /* 用flex布局实现横向排列+垂直居中 */
  align-items: center;
  width: fit-content; /* 让容器宽度适配内容 */
}

.btn-search {
  width: 200px;
  padding: 10px;
  border-radius: 50px;
  position: relative; /* 替换fixed，回归文档流 */
  margin-left: -100px; /* 保留偏移，实现按钮部分覆盖输入框边框的效果 */
  z-index: 1; /* 确保按钮在输入框上方，不会被遮挡 */
  border: none; /* 去掉边框避免双重边框视觉问题 */
}

.input-search {
  padding: 22px 120px 22px 20px; /* 右侧留足padding，避免输入内容被按钮挡住 */
  border-radius: 50px;
  width: 400px; /* 设置合适宽度，也可以用flex-grow:1让它占满剩余空间 */
}

修复后的HTML #

<div class="input-group">
  <input type="text" class="form-control input-search" placeholder="Recipient's username">
  <button class="btn btn-success btn-search" type="button">Button</button>
</div>

关键修改点说明： #

• 给.input-group添加Flex布局，让输入框和按钮在同一行且垂直居中对齐，从根源上理顺布局关系。
• 把按钮的position: fixed改成position: relative，让它回到文档流中，受父元素约束，避免脱离布局导致的重叠。
• 给按钮加上z-index:1，确保按钮始终在输入框上方，彻底解决覆盖问题。
• 调整输入框的右侧padding，既给按钮的偏移留出空间，也避免用户输入的内容被按钮挡住。
• 移除按钮外层多余的<div>，简化结构让布局更清晰。

这样调整后，输入框和按钮就能完美配合，不会再出现覆盖的问题啦～

内容的提问来源于stack exchange，提问作者AbdulKader