I am attempting to place a div above the map in order to include some actions such as filters, but the div only becomes visible when I move the map and then it goes behind the map.
Component CSS:
.map {
padding: 0;
position:relative;
width:100% ;
height: 100%;
}
.mapContainer{
width: 100vw;
height: 92.6vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 92.6);
padding: 0 ;
}
.overlay {
width: 100px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: rgba(255, 50, 50, 0.5);
}
Component HTML:
<div class="container-fluid" >
<div class="row">
<div class="col-sm-2">
<div *ngIf="city">
<p>{{city.name}} </p>
</div>
</div>
<div class="col-sm-10 mapContainer" >
<div leaflet class="map"
[leafletOptions]="options"
[leafletFitBounds]="bounds"
(leafletMapReady)="onMapReady($event)"
[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
(leafletMarkerClusterReady)="markerClusterReady($event)">
</div>
<div class="overlay">
<input type="radio" class="someButton">Foo Bar
</div>
</div>
</div>