css - 如何将弹出窗口移动到屏幕特定部分的 anchor /位置？

Question

你好，

这是我的网站 www.livehazards.com。我正在尝试将与每次地震相关的弹出框移动到屏幕的右下角。

这是与弹出框关联的代码

 .mapboxgl-popup-content {padding:10px; background:rgba(54, 69, 79, 0.8); color:#fff; pointer-events:none;}

 var feature = features[0];
var popup = new mapboxgl.Popup()
    .setLngLat (feature.geometry.coordinates)
    .setHTML ('Magnitude = <b> '+ feature.properties.mag + '</b>,' + ' Location = <b>' + feature.properties.place + '</b>,' + ' Time: <b> ' + expressTime(feature.properties.time)[0]+' '+expressTime(feature.properties.time)[1]+' ago </b>'+ '  Felt by:<b> ' + Feltby(feature.properties.felt)+ '</b>').addTo(map);

});

...我可以相对于该点移动弹出框，但不能将弹出框移动到特定区域并将其固定在那里(即使使用 position:absolute？)

.mapboxgl-popup-content {
right:100px;
bottom:100px;
position:absolute;
  }

有人知道怎么做吗？

Answer 1

使用 position:fixed 相对于视口(viewport)设置它(尽管在您的情况下容器是全尺寸的，您可以使用 position:absolute)，并添加 transform:none!important 以禁用库应用的内联样式。

.mapboxgl-map .mapboxgl-popup{
    right:100px;
    bottom:100px;
    top:auto;
    left:auto;
    position:fixed;
    transform:none !important;
}
.mapboxgl-map .mapboxgl-popup-tip{display:none;}