在传单地图顶部显示选择选项答案

【问题标题】：Make Select Option Display on top of Leaflet Map在传单地图顶部显示选择选项
【发布时间】：2021-07-04 22:56:44
【问题描述】：

我正在尝试在传单地图顶部显示一个选择标签（使用引导程序）。

我已经尝试在 css 中修改 z-index，但 select 标签仍然不可见。

我错过了什么？

下面是我的 HTML：

<div id="mapid" class="container-fluid">
      <form>
        <div class="form-group form-row align-items-center">
         <select class="form-control" id="country-dropdown" name="country">
            <option value="-" id="select-country">Pick a Country...</option>
         </select>
        </div> 
     </form>
 </div>

【问题讨论】：

为什么您的<form> 是地图的子项？你最好让它成为兄弟姐妹
我需要地图覆盖整个屏幕和表格浮在上面，如果是兄弟我可以这样做吗？

标签： html css bootstrap-4 leaflet css-position

【解决方案1】：

使form 成为地图的兄弟，并使用 css 将其定位为您想要的位置。如果您希望地图全屏显示，并在其上布置表单，请使用带有position: relative 的公共父级来执行此操作。您还可以在 css 中使用 pointer-events 以允许与地图进行交互，但仍使您的表单元素可用：

var mymap = L.map('map').setView([51.505, -0.09], 13);

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

.wrapper, #map, .form {
  height: 300px;
  width: 100%;
  padding: 0;
  margin: 0
}

.wrapper {
  position: relative
}

#map, .form {
  position: absolute;
  top: 0;
  left: 0
}

.form {
  z-index: 100000;
  padding: 10px 60px;
  pointer-events: none;
}

.form > * {
  pointer-events: auto;
}

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>


   
   <div class="wrapper">
     <div id="map"></div>
     <form class="form">
        <select class="form-control" id="country-dropdown" name="country">
          <option value="-" id="select-country">
            Pick a Country...
          </option>
         </select>
       <input type="text">
       <input type="text"> <input type="text">
<select class="form-control" id="country-dropdown" name="country">
          <option value="-" id="select-country">
            Pick a Country...
          </option>
         </select>
       <input type="text">
       <input type="text"> <input type="text"><select class="form-control" id="country-dropdown" name="country">
          <option value="-" id="select-country">
            Pick a Country...
          </option>
         </select>
       <input type="text">
       <input type="text"> <input type="text">
     </form>
   </div>

【讨论】：