How do I insert a button in the middle of an image? - html

Question

I want to place a search button in the middle of an image. But my button ended up at the bottom and outside of the image.
You can see live on www.emeupci.com
Here is my html code:
<div class="container-fluid headerimage">
<div class="col-md-12">
<img class="img-fluid" src="https://emeupci.com/static/users/img/map.png" alt="map" style="width: 100%;">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn dropdown-toggle"
style=" border: 26px solid #f9f9f9;
cursor: pointer;
font-weight: bold; background-color: #447193;
color: white; padding: 8px; border-radius: 0px;
font-size: 16px;);">Search for a church</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
</div>
</div>
</div>
</div>

Answer 1

If you make your map a background image instead of an img element you can overlay your button on top of the image using this layout. The parent div needs to be relatively positioned and the button needs to be absolutely positioned within the parent div.
<div class="parent">
<div class="child">
button go here
</div>
</div>
.parent {
position: relative;
background: url("Images/") center no-repeat; /* <-- path to your map image here*/
background-size: cover;
width: 300px;
height: 500px;
}
.child { /*This class styles your button or your buttons container*/
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: #abcf66;
bottom: 40px; /* adjust this to your liking*/
width: 80px;
height: 60px;
}