Mapbox点击图层弹窗显示于地图视图垂直下方（非z-index问题）求助

我给unaza-goes图层添加了点击事件，想要触发弹窗展示，实现逻辑和官方示例一致，但弹窗会撑开页面窗口，显示在地图Web视图的垂直下方（已排除z-index层级问题）。这是我首次使用Mapbox，可能存在配置遗漏，相关代码如下：

数据源配置代码 #

map.addSource('unaza-goes', {
    'type': 'geojson',
    'data': {
        'type': 'Feature',
        'properties': {},
        'geometry': {
            'type': 'LineString',
            'coordinates': [
                [...]
            ]
        }
    }
});

点击事件代码 #

map.on('click', 'unaza-goes', (e: any) => {
    let popupElem = new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML('<p>THIS IS A POPUP</p>')
        .addTo(map);
});

CSS样式代码 #

.map{ position: absolute; top: 0; bottom: 0; width: 100%; }
.mapboxgl-popup {
    max-width: 400px;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
body { margin: 0; padding: 0; }

弹窗触发后，未定位在地图点击位置，而是出现在页面底部并撑开页面高度。恳请帮忙排查问题，如需更多细节请告知，谢谢！

内容的提问来源于stack exchange，提问作者Klevi Dervishi