Question: I have a button on an input element, but when I click the input it goes over the button

![blur](https://imgur.com/5UnJhaH.png)

![focus](https://imgur.com/IzoibLS.png)

```css
.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;
}
```

```html
<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: 
You need to set the `z-index` of the button. Just create an extra class for the button and set `z-index: 99`.

for example use css property:

```
button
{
z-index:99 !important;
}

```
For Bootstrap 4:
I'm not sure why you added its own stylesheet if you're using Bootstrap

```html
<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>
```