Leaflet 在传单地图上添加div元素

我需要将我最喜欢的文本添加到我的

map

div的中间顶部，因此我有：

<div id="map" style="height:300px;">
   <div style="width:150px;background-color:red; z-index:1000;"> Hello World !!</div>
</div>

你好，世界！！

这是我的简化JS代码：

<script>               
    $(document).ready(function () {
        var Lat = 32.646540;
        var Lon = 51.667743;
        map = L.map('map').setView([Lat, Lon], 19);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Thanks to OSM',
            maxZoom: 19
        }).addTo(map);               
    });
</script> 

$（文档）.ready（函数（）{
var Lat=32.646540；
var-Lon=51.667743；
map=L.map（'map'）.setView（[Lat，Lon]，19）；
L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
归因：“感谢OSM”，
最大缩放：19
}).addTo（地图）；
});

问题是

红色文本
在地图后面，我无法管理它。
加载地图之前：

加载地图后：
添加您的Hello World
div
更高的
z-index
如
z-index:9999

更新

现在我明白了。将hello World div作为子对象添加到地图中。您必须将其添加为同级

<div class="box"> Hello World</div>
<div id="map" style="height:300px;"></div>

谢谢你的回复。我尝试了
z-index:9999999
但没有成功。我需要
Hello-World
位于地图上而不是地图之外。使用兄弟姐妹使
Hello-World
位于地图区域之外而不是地图区域。否。如果您使用css porporty
position:absolute
，您可以在屏幕的任何位置设置div：
.box{
    position: absolute;
    top: 0;
    z-index: 9999;
    text-align: center;
    width: 150px;
    left: 50%;
    margin-left: -75px; /* half of the width */
    background-color:red;
}