试图将地图位置更改为粘性

Question

我将map元素包装在容器内，并且尝试将其位置更改为粘滞（相对于相对）。我有一些文字，希望在查看者向下滚动时在地图上滚动，但是，当我打开检查工具时，我看到#map元素的位置恢复为相对，尽管在我的实际代码中很粘。当我在浏览器中将其更改为粘性时，它可以正常工作。有人可以告诉我我在做什么错

这是我的HTML

<div id="mapContainer" class="container-map">

<div id="map" style="position: sticky;" class="leaflet-container 
leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet- 
touch-drag leaflet-touch-zoom" tabindex="0"> 

</div>

<div id='sections'>
    <div>
        <h1>Operation Entebbe</h1>
        <p class="text">
            <span class="text-decorate">O</span>Sample Text
        </p>
    </div>
</div>
</div>

这是我的CSS

#mapContainer{
        position: relative;
}



#sections{
        z-index: 99;
        max-width: 100%;
        width: 640px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
}


#sections > div{
        background: white;
        height: 100%;
        opacity: .75;          
        transition: 0.5s;

}


#sections > div p.text {
        display: block;
        color: #000000;
        z-index: 10;
}



#sections > div.graph-scroll-active{
        opacity: 1;
}



#map {
        margin-left: 40px;
        z-index: 3;
        width: 500px;
        position: -webkit-sticky;
        position: sticky;
        top: calc(50% - 250px);
}



#map svg {
        z-index: 2;
}



#map svg {
        -webkit-transition: transition .6s;
        -moz-transition: transition .6s;
        -ms-transition: transition .6s;
        -o-transition: transition .6s;
        transition: transition .6s;
}



@media (max-width: 925px)  {
        #map{
            width: 100%;
            margin-left: 0px;
            float: none;
}

#sections{
            width: auto;
            position: relative;
            margin: 0px auto;
}

#sections > div{
            background: rgba(255,255,255,.5);
            padding: 10px;
            border-top: 1px solid;
            border-bottom: 1px solid;
            margin-bottom: 80vh;
}

pre{
            overflow: hidden;
}

h1{
            margin: 10px;
}
}


#map {
    width: 1000px;
    height: 600px;
    margin-left: 140px;
    margin-top: 50px;
    position: sticky; 
}


svg {
    position: relative;
}

任何帮助将不胜感激。