Wsrtjtyk

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>

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