輸入元素在聚焦時覆蓋按鈕

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>