你好,
这是我的网站 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;
}
有人知道怎么做吗?
最佳答案
使用 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;}
关于css - 如何将弹出窗口移动到屏幕特定部分的 anchor /位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47606602/