为什么按钮隐藏在传单地图后面......如何提出来？

问：

我编写了 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>