Make Select Option Display on top of Leaflet Map

Question

I'm trying to display a select tag on top of a leaflet map (using bootstrap).

I've tried amending the z-index in css but the select tag is still not visible.

What am I missing?

My HTML below:

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

Answer 1

Make the form a sibling of the map, and use css to position it as you want. If you want the map to be full screen, and the form to be laid out over it, use a common parent with position: relative to do that. You can also use pointer-events in the css to allow interactivity with the map but still make your form elements usable:

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>