イメージのポップアップウィンドウの位置を変更

Question

イメージの特定の場所にポップアップが表示されます。私の目的は、要素の位置を検出し、左右のブラウザの端の近くにあるかどうかを確認することです。基本的に今起こっているのは、ポップアップがブラウザーウィンドウによってオーバーラップ/カットされていることです。 私はこれがいつ起こっているのかを検出したいと思っています。左に動いている場合、ポップアップは右に進み、逆に進みます。どのように私がそれを行うsholdどのような提案？

Answer 1

あなたは、50vwビューポートの縦幅の半分のマイナス要素の半分widthに要素のleftプロパティを設定するためにcssを使うcenter

#popup { 
 
    position: relative; 
 
    left: calc(50vw - 100px); 
 
    width: 200px; 
 
    border: 1px solid #000; 
 
    padding: 8px; 
 
    text-align: center; 
 
}

<div id="popup">ABCD EF GHIJKLMN</div>