Leaflet地图按钮被遮挡，如何将其置于上层？

你把按钮容器放在了Leaflet地图的#map容器内部，而Leaflet初始化后会生成多个带层级的子元素（如瓦片图层、交互图层），这些元素的默认z-index高于你内部的按钮容器，导致按钮被遮挡。以下是两种可行的解决方法：

方法1：调整内部按钮容器的层级与定位 #

给包含按钮的.container添加自定义CSS，通过相对定位+高z-index确保它在地图图层上方：

#map .container {
  position: relative;
  z-index: 1000; /* 该值需大于Leaflet默认图层z-index（瓦片图层默认是2，叠加图层是4） */
  padding: 0 15px; /* 可选，避免按钮贴紧地图边缘 */
}

修改后的完整代码：

<style>
#map .container {
  position: relative;
  z-index: 1000;
  padding: 0 15px;
}
</style>

<div id="map">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-6 mt-3">
                <form class="form-inline">
                    <label class="d-lg-inline d-none">Zoom To Location</label>
                    <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                </form>
            </div>
            <div class="col-lg-3 col-6 mt-lg-3 mt-0 ml-lg-4 ml-0 filter">
                <div class="text-center">
                    <label class="my-0 d-lg-inline d-none">FILTERS</label><br>
                    <a href="search" class="btn btn-warning mr-2">Criteria</a>
                    <a href="search" class="btn btn-warning">Satellite</a>
                </div>
            </div>
            <div class="col-lg-5 col-9 mt-lg-3 ml-lg-5 ml-0 d-flex justify-content-start aoi">
                <div class="text-center">
                    <label class="my-0 d-lg-inline d-none">Define Area of Interest</label><br>
                    <a href="search" class="btn btn-warning mr-2">Draw</a>
                    <a href="search" class="btn btn-warning mr-2">Coordinates</a>
                    <a href="search" class="btn btn-warning">Upload</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
</script>

方法2：将按钮容器移出地图容器（可选） #

如果不想把按钮放在#map内部，可将按钮容器移到地图外，通过绝对定位让它覆盖在地图上方：

.map-controls {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
}

对应的HTML结构调整：

<div class="map-controls">
    <div class="container">
        <!-- 原有按钮内容保持不变 -->
    </div>
</div>
<div id="map"></div>

内容的提问来源于stack exchange，提问作者Mafaz