引导 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>

- John

Answer 1

由于您在overlay类中使用了position: absolute，因此可以将z-index属性应用于等于或更大的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

- kboul

---

小提示：如果您正在使用Leaflet的Geoman编辑器，则控件位于z-index 1000。只需将覆盖层的z-index设置为1001即可。 - lsabi