javascript - JS與CSS的問題，滑鼠移到地圖上的某個圖示後，怎麼讓顯示出來的內容相對於圖示居中顯示。

Question

如下圖，右邊的是我需要的效果，即滑鼠移上地圖上紅色位置圖示時顯示出來的照片與內容相對於下面位置圖示居中顯示。而左邊是我做出來的效果，位移太嚴重了，求大神幫忙看看。

#下面是我的HTML程式碼

<p style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 2044px; top: -747px; z-index: -5912030; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1949px; top: -704px; z-index: -5911996; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: -2.37214e+07px; top: 6.85098e+06px; z-index: 0; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1892px; top: -717px; z-index: -5912006; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1979px; top: -703px; z-index: -5911996; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 18px; height: 18px; left: 1788px; top: -516px; z-index: 19000000; -webkit-user-select: none; display: none; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span></p>

Answer 1

你貼的程式碼沒有意義，只是展示了紅色圖示的位置，並沒有給出彈出框的結構和樣式。看上去，彈出部分是 js 動態產生的並調整位置的。兩個思路：

一、浮動層加入到圖示 span 標籤裡，設定浮動層的有樣式

當滑鼠移到圖示上時，動態產生浮動層資料內容，並加入 span 標籤。滑鼠移出時移出動態新增的圖層。需要為浮動圖層設定樣式，大致如：

span.BMap_Marker > .浮动层 {
    background-color: #fff;
    /* 基础样式略 */
    bottom: 100%;
    left: 50%;
    margin-left: -48px; /* 假设你的浮动层总宽度为 96px， */
    position: absolute;
}

需要注意 span 的 z-index 屬性變化，因為浮動層是嵌入其中的，所以浮動層可能會被遮擋。

二、JS 動態調整

如果你的浮動層是固定尺寸的，那麼你只需要用 JS 獲取當前選定的圖標，並讀取出其相對位置，然後進行計算浮動層的位置即可：

left: 图标的left - (浮动层宽度/2);
top: 图标的top - 浮动层高度;