Bootstrap Angular Leaflet Div над картой

Question

Я пытаюсь поместить div над картой, поместить некоторые действия, такие как фильтры и прочее, но div появляется только тогда, когда я перемещаю карту, и она идет за картой.

компонент 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);
            }

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>

Answer 1

Так как вы использовали position: absolute в вашем overlay класс вы можете применить z-index свойство быть equal or more 1000 поэтому он находится перед элементом карты, который имеет более низкое значение z-index.

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

демонстрация