投稿したコードは、赤いアイコンの位置を示すだけで、ポップアップ ボックスの構造やスタイルを示すものではありません。ポップアップ部分はjsで動的に生成・調整されているようです。 2 つのアイデア:

1. アイコンspanタグにフローティングレイヤーを追加し、フローティングレイヤーのスタイルを設定します

マウスがアイコン上に移動すると、フローティング レイヤー データ コンテンツが動的に生成され、span タグに追加されます。マウスを移動すると、動的に追加されたレイヤーが外に移動します。大まかに次のように、フローティング レイヤーのスタイルを設定する必要があります:

フローティングレイヤーが埋め込まれているため、フローティングレイヤーが隠れてしまう可能性があるため、span 的 z-indexのz-index属性の変更に注意する必要があります。

2. JSの動的調整

フローティング レイヤーのサイズが固定されている場合は、JS を使用して現在選択されているアイコンを取得し、その相対位置を読み取り、フローティング レイヤーの位置を計算するだけです。