Disappearing button in HTML

Question

I wrote a simple input field with a button in it. Code is as given below.

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

As you can see, when I click in input field, button disappears. When I click outside that form, it reappears. But I don't want it to disappear when clicked on input field. How can I do that?

Answer 1

Set z-index: 1 on #srch-term element

Answer 2

use z-index while focus

 input:focus ~ .btn-primary {
     z-index: 100;
 }

form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

 input:focus ~ .btn-primary {
     z-index: 100;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>