地图上方的 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

由于您在overlay 类中使用了position: absolute，您可以将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
}

Demo