jquery - 如何使用 JQuery 在图像的特定位置重叠 Div？

Question

我在网页上有一张大图。和它下面的一个 div 包含数据。现在，当用户单击按钮时，包含数据的 Div 必须使用 JQuery 在特定位置的图像上重叠。

<div>
<img src="Images/FLRegions.png" usemap="#planetmap" style="height: 766px; width: 776px;z-index:1;" class="map" />
</div>

<div id="destination">
This div contains Data which must overlap on Image on specific Location using JQuery
</div>

帮助赞赏！谢谢！

Answer 1

像这样将 div 放在另一个里面：

<div class="container">
    <img src="Images/FLRegions.png" usemap="#planetmap" style="height: 766px; width: 776px;z-index:1;" class="map" />
    <div id="destination">
        This div contains Data which must overlap on Image on specific Location using JQuery
    </div>
</div>

然后像这样使用CSS：

.container{
    position: relative;
}
#destination{
    position: absolute;
    top: 0;
    left: 0;
}

它可以像这样使用 jQuery 动态移动：

$('#button').click(function(){
    $('#destination').animate({
        left: 0, //enter your position
        top: 0  
    }, 500);
});