为什么按钮隐藏在传单地图后面...如何将它们带到前面？

Question

我已经编写了 html 代码，将一些响应式按钮放在传单地图上。这些按钮隐藏在地图后面并且不显示。如何带领他们前进？

这是地图

按钮应该看起来像这样

请告诉我该怎么办？ ..我的代码如下；

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

Answer 1

您必须将容器 div（包含按钮和输入字段）的位置设置为“绝对”，以便它相对于地图定位，并给它一个高 z 索引（这使得它显示在其上方而不是比后面）。您可以按照以下步骤操作：

<div class="container position-absolute" style="z-index: 1;" >

您还必须将其父容器（地图 div）的位置设置为相对位置。您可以按照以下步骤操作：

<div id="map" class="relative">