输入元素在聚焦时覆盖按钮

Question

我在输入元素上有一个按钮，但是当我单击输入时，它会超过按钮

.btn-search {
  width: 200px;
  padding: 10px;
  border-radius: 50px;
  position: fixed;
  margin-left: -100px;
  display: inline-block;
  vertical-align: middle;
}

.input-search {
  padding: 22px;
  border-radius: 50px;
  position: static;
}

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

Answer 1

您需要设置按钮的z-index。只需为按钮创建一个额外的类并设置z-index: 99。

例如使用css属性：

button
{
z-index:99 !important;
}

Answer 2

.btn-search {
  width: 200px;
  padding: 10px;
  border-radius: 50px;
  position: fixed;
  margin-left: -100px;
  display: inline-block;
  vertical-align: middle;
  z-index:999 !important;
}

在按钮的z-index处使用较高的值，以便该按钮始终显示在任何其他元素的上方。

Answer 3

对于Bootstrap 4： 如果使用Bootstrap，我不确定为什么要添加自己的样式表

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="input-group">
  <input type="text" class="form-control input-search" placeholder="Recipient's username">
  <div>
    <button class="btn btn-success btn-search" type="button">Button</button>
  </div>
</div>