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的map元素的前面-索引值。

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

Demo

Bootstrap Angular Leaflet Div上面的地图

1 个答案: