ポイントのポップアップを画面の特定の部分にアンカー/ポジションに移動するにはどうすればいいですか？

Question

こんにちは、

ここに私のウェブサイトwww.livehazards.comです。私は各地震に関連するポップアップボックスを画面の右下に移動しようとしています。ここ

）はpopupbox

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

}に関連付けられたコードです。

...私はポイントに関連して、ポップアップボックスを移動することができますが、特定の領域にpopupboxを移動し、そこにそれを固定することはできません（でも位置と：？絶対）

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

誰がどのように知っていますこの感謝をするには？ビューポートに対するそれを設定する

Answer 1

使用position:fixed（コンテナがフルサイズであることをあなたのケースでは、あなたが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;}