以下に示すように、右側は必要な効果です。つまり、地図上の赤い場所アイコンの上にマウスを移動すると、表示される写真とコンテンツが下の場所アイコンを基準にして中央に配置されます。左側が私が作ったエフェクトですが、ズレがひどいので参考にしてください。 
以下は私の HTML コードです
リーリー
仅有的幸福2017-06-12 09:34:10
投稿したコードは、赤いアイコンの位置を示すだけで、ポップアップ ボックスの構造やスタイルを示すものではありません。ポップアップ部分はjsで動的に生成・調整されているようです。 2 つのアイデア:
spanタグにフローティングレイヤーを追加し、フローティングレイヤーのスタイルを設定しますマウスがアイコン上に移動すると、フローティング レイヤー データ コンテンツが動的に生成され、span タグに追加されます。マウスを移動すると、動的に追加されたレイヤーが外に移動します。大まかに次のように、フローティング レイヤーのスタイルを設定する必要があります:
フローティングレイヤーが埋め込まれているため、フローティングレイヤーが隠れてしまう可能性があるため、span 的 z-indexのz-index属性の変更に注意する必要があります。
フローティング レイヤーのサイズが固定されている場合は、JS を使用して現在選択されているアイコンを取得し、その相対位置を読み取り、フローティング レイヤーの位置を計算するだけです。
リーリー