为什么地图框的弹出窗口显示在地图 Web 视图下方（垂直不在 z 索引上）？

Question

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

        map.on('click', 'unaza-goes', (e: any) => {
            const popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false
            });

            let popupElem = new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML('<p">THIS IS A POPUP</p>')
                .addTo(map);

            popupElem.setLngLat(e.lngLat).addTo(map);
        });

    .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; }

我的 unaza-goes 图层中有一个 onclick 事件，我想显示适当的弹出窗口，我的做法与我在几个示例中看到的方式相同，但弹出窗口似乎扩展了窗口并显示在地图网络下视图（在垂直方向下而不是在 z 索引上），请随时向我询问详细信息，因为这是我第一次使用 Mapbox，我可能会丢失一些东西，谢谢！

Answer 1

如果我没记错的话，哪些绝对定位元素显示在其他绝对定位元素前面取决于它们在 DOM 中出现的顺序。您可以使用 CSS 属性 z-index 在 CSS 中控制它。