如何在图像中间插入按钮？

Question

我想在图像中间放置一个搜索按钮。但我的按钮最终位于图像的底部和外部。

您可以在www.emeupci.com上观看直播

这是我的HTML代码：

<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

如果您将地图设为背景图像而不是img元素，则可以使用此布局将按钮覆盖在图像顶部。父div需要相对定位，按钮需要绝对定位在父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;
}