如何使用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);
});