Add a div element on Leaflet map - leaflet

Question

I need to add my favorite text to middle-top of my map div, so I have:
<div id="map" style="height:300px;">
<div style="width:150px;background-color:red; z-index:1000;"> Hello World !!</div>
</div>
And this is my simplified JS code:
<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>
And the problem is that the Red Text goes behind the map and I can't manage it.
Before loading the map :
After loading the map :

Answer 1

add your Hello World div a higher z-index like z-index: 9999
Update
Now I see it. You add the hello World div as child to the map. You have to add it as sibling.
<div class="box"> Hello World</div>
<div id="map" style="height:300px;"></div>
CSS:
.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;
}