Bootstrap Angular Leaflet Div above map

user_1322874 0
Viewed 1486

I'm trying to put a div above the map , to put some actions, like filters and stuff but the div only appears when I move the map and the 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>
bootstrap-4 twitter-bootstrap leaflet angular typescript
1 Answers

Since you have used position: absolute in your overlay class you can apply the z-index property to be equal or more 1000 so it is in front of the map element which has lower z-index value. 

.overlay {
     width: 100px;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     background-color: rgba(255, 50, 50, 0.5);
     z-index: 1000
}

Demo

user_49295310
Related